pat/wursor
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

improved a lot of things

Browse Source
This commit is contained in:
SinachPat
2026-04-26 16:53:56 +01:00
parent 855ca56f5a
commit 7c160e853e
14 changed files with 179 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/public/features/completion-zone.html
+24 -24
View File
@@ -80,7 +80,7 @@ button{font-family:inherit;cursor:pointer;border:none;background:none;}
.nav-dd-item{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:var(--r-2);transition:background 0.1s;cursor:pointer;}
.nav-dd-item:hover{background:var(--bg-muted);}
.nav-dd-item.active{background:var(--green-soft);}
.nav-dd-icon{width:30px;height:30px;background:var(--blue-soft);border:1px solid var(--blue-mid);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;}
.nav-dd-icon{width:30px;height:30px;background:var(--blue-soft);border:1px solid var(--blue-mid);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;color:var(--blue);}
.nav-dd-icon.green{background:var(--green-soft);border-color:var(--green-mid);}
.nav-dd-text{display:flex;flex-direction:column;}
.nav-dd-name{font-size:0.8125rem;font-weight:600;color:var(--fg);letter-spacing:-0.01em;}
@@ -251,28 +251,28 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
</a>
<div class="nav-dropdown-menu">
<a class="nav-dd-item" href="/features/live-artboard.html">
<div class="nav-dd-icon">⬜</div>
<div class="nav-dd-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="2.5" width="11" height="9" rx="1.5" stroke="currentColor" stroke-width="1.3"/><path d="M5 6.5l1.8 2 1.2-1.6 1.4 2" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div class="nav-dd-text"><span class="nav-dd-name">Live Artboard</span><span class="nav-dd-desc">Your app rendered live in the canvas</span></div>
</a>
<a class="nav-dd-item" href="/features/origin-graph.html">
<div class="nav-dd-icon">◉</div>
<div class="nav-dd-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="2.5" r="1.5" fill="currentColor"/><circle cx="2.5" cy="11" r="1.5" fill="currentColor"/><circle cx="11.5" cy="11" r="1.5" fill="currentColor"/><path d="M6.2 3.8L3.2 9.6M7.8 3.8l3 5.8M3.8 11h6.4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg></div>
<div class="nav-dd-text"><span class="nav-dd-name">Origin Graph</span><span class="nav-dd-desc">Every component, indexed and queryable</span></div>
</a>
<a class="nav-dd-item" href="/features/intent-diff.html">
<div class="nav-dd-icon">△</div>
<div class="nav-dd-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="4" width="6.5" height="7.5" rx="1.3" stroke="currentColor" stroke-width="1.3"/><rect x="6" y="2.5" width="6.5" height="7.5" rx="1.3" stroke="currentColor" stroke-width="1.3"/></svg></div>
<div class="nav-dd-text"><span class="nav-dd-name">Intent Diff</span><span class="nav-dd-desc">Ship component-level diffs, not redlines</span></div>
</a>
<div class="nav-dd-sep"></div>
<a class="nav-dd-item active" href="/features/completion-zone.html">
<div class="nav-dd-icon green">◈</div>
<div class="nav-dd-icon green"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1.5L8.1 5.4 12 6.5l-3.9 1.1L7 11.5 5.9 7.6 2 6.5l3.9-1.1z"/><circle cx="11" cy="2.5" r="1" fill="currentColor" opacity="0.5"/></svg></div>
<div class="nav-dd-text"><span class="nav-dd-name">Completion Zone</span><span class="nav-dd-desc">AI-filled design, constrained to your system</span></div>
</a>
<a class="nav-dd-item" href="/features/agent-bridge.html">
<div class="nav-dd-icon">⇄</div>
<div class="nav-dd-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 5h11M9.5 2.5l3 2.5-3 2.5"/><path d="M12.5 9h-11M4.5 6.5L1.5 9l3 2.5"/></svg></div>
<div class="nav-dd-text"><span class="nav-dd-name">Agent Bridge</span><span class="nav-dd-desc">MCP channel to Cursor, Claude Code &amp; more</span></div>
</a>
<a class="nav-dd-item" href="/features/integrations.html">
<div class="nav-dd-icon">🔗</div>
<div class="nav-dd-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><path d="M5.5 8.5l3-3"/><path d="M3.8 6.8L2.8 7.8A2.5 2.5 0 006.3 11l1-1"/><path d="M10.2 7.2l1-1A2.5 2.5 0 007.7 3l-1 1"/></svg></div>
<div class="nav-dd-text"><span class="nav-dd-name">Integrations</span><span class="nav-dd-desc">Linear, Slack, GitHub, Figma &amp; more</span></div>
</a>
</div>
@@ -372,7 +372,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
</div>
<!-- Prompt input -->
<div style="margin-top:8px;background:#111118;border:1px solid rgba(16,185,129,0.3);border-radius:7px;padding:7px 10px;display:flex;align-items:center;gap:7px;box-shadow:0 0 0 3px rgba(16,185,129,0.06);">
<span style="font-size:0.475rem;color:rgba(16,185,129,0.7);">◈</span>
<span style="font-size:0.475rem;color:rgba(16,185,129,0.7);"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1.5L8.1 5.4 12 6.5l-3.9 1.1L7 11.5 5.9 7.6 2 6.5l3.9-1.1z"/><circle cx="11" cy="2.5" r="1" fill="currentColor" opacity="0.5"/></svg></span>
<span style="font-family:var(--mono);font-size:0.5rem;color:rgba(255,255,255,0.55);flex:1;">Add a metric badge to the top-right corner</span>
<span style="display:inline-block;width:1.5px;height:10px;background:#10B981;border-radius:1px;animation:cz-pulse 1s ease-in-out infinite;"></span>
</div>
@@ -479,10 +479,10 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
<h2 class="d3">Not generation —<br>completion.</h2>
<p class="subtitle">Generic AI tools invent. Completion Zone finishes. The difference is the constraint layer: every output token is validated against your existing design system before anything touches the canvas.</p>
<ul class="feat-pts">
<li><span class="feat-pt-icon">◈</span>Zero design drift — the AI only uses tokens that already exist in your system, never creating new ones.</li>
<li><span class="feat-pt-icon">◈</span>Only variants that exist — if your Button has three variants, the AI can only choose from those three.</li>
<li><span class="feat-pt-icon">◈</span>Only spacings from your scale — no magic numbers, no arbitrary pixel values slipping through.</li>
<li><span class="feat-pt-icon">◈</span>Generates real code, not images — the output is a live component on your artboard, not a static screenshot.</li>
<li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1.5L8.1 5.4 12 6.5l-3.9 1.1L7 11.5 5.9 7.6 2 6.5l3.9-1.1z"/><circle cx="11" cy="2.5" r="1" fill="currentColor" opacity="0.5"/></svg></span>Zero design drift — the AI only uses tokens that already exist in your system, never creating new ones.</li>
<li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1.5L8.1 5.4 12 6.5l-3.9 1.1L7 11.5 5.9 7.6 2 6.5l3.9-1.1z"/><circle cx="11" cy="2.5" r="1" fill="currentColor" opacity="0.5"/></svg></span>Only variants that exist — if your Button has three variants, the AI can only choose from those three.</li>
<li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1.5L8.1 5.4 12 6.5l-3.9 1.1L7 11.5 5.9 7.6 2 6.5l3.9-1.1z"/><circle cx="11" cy="2.5" r="1" fill="currentColor" opacity="0.5"/></svg></span>Only spacings from your scale — no magic numbers, no arbitrary pixel values slipping through.</li>
<li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1.5L8.1 5.4 12 6.5l-3.9 1.1L7 11.5 5.9 7.6 2 6.5l3.9-1.1z"/><circle cx="11" cy="2.5" r="1" fill="currentColor" opacity="0.5"/></svg></span>Generates real code, not images — the output is a live component on your artboard, not a static screenshot.</li>
</ul>
<a href="#" class="btn btn-primary">Request early access</a>
</div>
@@ -563,10 +563,10 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
<h2 class="d3">The AI knows<br>your entire system.</h2>
<p class="subtitle">Before Claude generates a single character, it receives the complete context of your Origin Graph — every token, every component name, every spacing value. The constraint is baked into the prompt, not tacked on afterward.</p>
<ul class="feat-pts">
<li><span class="feat-pt-icon">◈</span>All design tokens — color palettes, typography scales, spacing systems — injected verbatim into the system prompt.</li>
<li><span class="feat-pt-icon">◈</span>All component names, accepted props, and valid variant combinations from your live component library.</li>
<li><span class="feat-pt-icon">◈</span>The current artboard snapshot — surrounding components inform what fits, stylistically and spatially.</li>
<li><span class="feat-pt-icon">◈</span>Accepted completions feed back into the graph, making every future suggestion smarter over time.</li>
<li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1.5L8.1 5.4 12 6.5l-3.9 1.1L7 11.5 5.9 7.6 2 6.5l3.9-1.1z"/><circle cx="11" cy="2.5" r="1" fill="currentColor" opacity="0.5"/></svg></span>All design tokens — color palettes, typography scales, spacing systems — injected verbatim into the system prompt.</li>
<li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1.5L8.1 5.4 12 6.5l-3.9 1.1L7 11.5 5.9 7.6 2 6.5l3.9-1.1z"/><circle cx="11" cy="2.5" r="1" fill="currentColor" opacity="0.5"/></svg></span>All component names, accepted props, and valid variant combinations from your live component library.</li>
<li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1.5L8.1 5.4 12 6.5l-3.9 1.1L7 11.5 5.9 7.6 2 6.5l3.9-1.1z"/><circle cx="11" cy="2.5" r="1" fill="currentColor" opacity="0.5"/></svg></span>The current artboard snapshot — surrounding components inform what fits, stylistically and spatially.</li>
<li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1.5L8.1 5.4 12 6.5l-3.9 1.1L7 11.5 5.9 7.6 2 6.5l3.9-1.1z"/><circle cx="11" cy="2.5" r="1" fill="currentColor" opacity="0.5"/></svg></span>Accepted completions feed back into the graph, making every future suggestion smarter over time.</li>
</ul>
</div>
<!-- Pseudo-code panel -->
@@ -619,7 +619,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
<div class="wrap">
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,0.06);border-radius:var(--r-4);overflow:hidden;" class="stagger">
<div style="background:var(--bg-inv-2);padding:32px 28px;">
<div style="font-size:1.5rem;margin-bottom:14px;">◈</div>
<div style="font-size:1.5rem;margin-bottom:14px;"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1.5L8.1 5.4 12 6.5l-3.9 1.1L7 11.5 5.9 7.6 2 6.5l3.9-1.1z"/><circle cx="11" cy="2.5" r="1" fill="currentColor" opacity="0.5"/></svg></div>
<h3 style="font-size:0.9375rem;font-weight:700;color:var(--fg-inv);letter-spacing:-0.02em;margin-bottom:8px;">Zero design drift</h3>
<p style="font-size:0.8125rem;color:var(--fg-inv-2);line-height:1.65;">Every token, every spacing value, every color reference is pulled from your existing scale. Nothing new is ever introduced into your system.</p>
</div>
@@ -634,7 +634,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
<p style="font-size:0.8125rem;color:var(--fg-inv-2);line-height:1.65;">Every accepted completion feeds back into the Origin Graph. The more you build, the better Completion Zone understands your conventions.</p>
</div>
<div style="background:var(--bg-inv-2);padding:32px 28px;">
<div style="font-size:1.5rem;margin-bottom:14px;">◉</div>
<div style="font-size:1.5rem;margin-bottom:14px;"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="2.5" r="1.5" fill="currentColor"/><circle cx="2.5" cy="11" r="1.5" fill="currentColor"/><circle cx="11.5" cy="11" r="1.5" fill="currentColor"/><path d="M6.2 3.8L3.2 9.6M7.8 3.8l3 5.8M3.8 11h6.4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg></div>
<h3 style="font-size:0.9375rem;font-weight:700;color:var(--fg-inv);letter-spacing:-0.02em;margin-bottom:8px;">Respects constraints</h3>
<p style="font-size:0.8125rem;color:var(--fg-inv-2);line-height:1.65;">Only variants that exist in your library. Only spacings from your defined scale. Hard constraints enforced in the prompt, not soft suggestions.</p>
</div>
@@ -658,19 +658,19 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
<span class="tech-tag">Claude API</span>
</div>
<div class="tech-card">
<div class="tech-icon">◈</div>
<div class="tech-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1.5L8.1 5.4 12 6.5l-3.9 1.1L7 11.5 5.9 7.6 2 6.5l3.9-1.1z"/><circle cx="11" cy="2.5" r="1" fill="currentColor" opacity="0.5"/></svg></div>
<h3>Token-constrained generation</h3>
<p>A validation layer sits between the LLM output and the canvas. Every proposed token value is checked against your design token registry. Invalid tokens are flagged or substituted with the nearest valid match from your scale.</p>
<span class="tech-tag">Constraint layer</span>
</div>
<div class="tech-card">
<div class="tech-icon">◉</div>
<div class="tech-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="2.5" r="1.5" fill="currentColor"/><circle cx="2.5" cy="11" r="1.5" fill="currentColor"/><circle cx="11.5" cy="11" r="1.5" fill="currentColor"/><path d="M6.2 3.8L3.2 9.6M7.8 3.8l3 5.8M3.8 11h6.4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg></div>
<h3>Graph context retrieval</h3>
<p>The Origin Graph is queried with a relevance function to fetch the most pertinent subset of your component library for each prompt — keeping the context window focused and the generation latency low.</p>
<span class="tech-tag">Origin Graph</span>
</div>
<div class="tech-card">
<div class="tech-icon">△</div>
<div class="tech-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="4" width="6.5" height="7.5" rx="1.3" stroke="currentColor" stroke-width="1.3"/><rect x="6" y="2.5" width="6.5" height="7.5" rx="1.3" stroke="currentColor" stroke-width="1.3"/></svg></div>
<h3>Component snapshot diffing</h3>
<p>Before placing a completion on the canvas, Originmain diffs it against the current artboard state. Only the minimal set of changes is applied, producing a clean Intent Diff entry with zero noise or redundancy.</p>
<span class="tech-tag">Intent Diff</span>
@@ -701,19 +701,19 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
</div>
<div class="related-grid stagger">
<a class="related-card" href="/features/origin-graph.html">
<div class="related-icon">◉</div>
<div class="related-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="2.5" r="1.5" fill="currentColor"/><circle cx="2.5" cy="11" r="1.5" fill="currentColor"/><circle cx="11.5" cy="11" r="1.5" fill="currentColor"/><path d="M6.2 3.8L3.2 9.6M7.8 3.8l3 5.8M3.8 11h6.4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg></div>
<h3>Origin Graph</h3>
<p>The indexed knowledge base of every component, token, and relationship in your design system. Completion Zone pulls its constraints directly from the graph on every generation request.</p>
<span class="related-link">Explore Origin Graph →</span>
</a>
<a class="related-card" href="/features/live-artboard.html">
<div class="related-icon">⬜</div>
<div class="related-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="2.5" width="11" height="9" rx="1.5" stroke="currentColor" stroke-width="1.3"/><path d="M5 6.5l1.8 2 1.2-1.6 1.4 2" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<h3>Live Artboard</h3>
<p>Completed components are placed directly onto the live artboard — rendered as real code in a real iframe, not as a static preview. What you see on the canvas is exactly what ships.</p>
<span class="related-link">Explore Live Artboard →</span>
</a>
<a class="related-card" href="/features/agent-bridge.html">
<div class="related-icon">⇄</div>
<div class="related-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 5h11M9.5 2.5l3 2.5-3 2.5"/><path d="M12.5 9h-11M4.5 6.5L1.5 9l3 2.5"/></svg></div>
<h3>Agent Bridge</h3>
<p>Trigger completions from inside Cursor or Claude Code via the MCP channel. Your editor prompt invokes the same constraint engine, placing components directly from your IDE without switching context.</p>
<span class="related-link">Explore Agent Bridge →</span>