improved a lot of things
This commit is contained in:
SinachPat
@@ -79,7 +79,7 @@ button{font-family:inherit;cursor:pointer;border:none;background:none;}
|
||||
#nav:not(.scrolled) .nav-burger span{background:rgba(255,255,255,0.8);}
|
||||
.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-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.purple{background:var(--purple-soft);border-color:var(--purple-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;}
|
||||
@@ -278,28 +278,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 purple">△</div>
|
||||
<div class="nav-dd-icon purple"><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" href="/features/completion-zone.html">
|
||||
<div class="nav-dd-icon">◈</div>
|
||||
<div class="nav-dd-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>
|
||||
<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 & 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 & more</span></div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -456,9 +456,9 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
|
||||
<h2 class="d3">The diff runs on the<br>component AST, not pixels.</h2>
|
||||
<p class="subtitle">Screenshot comparison tools tell you something looks different. Intent Diff tells you exactly which prop changed, from what value to what value. Every diff is a first-class data structure — queryable, storable, and consumable by CI/CD pipelines without any manual interpretation.</p>
|
||||
<ul class="feat-pts">
|
||||
<li><span class="feat-pt-icon">△</span>Diffs are computed on Zod-validated component snapshots, never on rendered images.</li>
|
||||
<li><span class="feat-pt-icon">△</span>Output is a standard unified patch string — parseable by any diff tooling in your stack.</li>
|
||||
<li><span class="feat-pt-icon">△</span>CI/CD can consume the patch directly — block merges, post PR comments, or trigger alerts on specific prop changes.</li>
|
||||
<li><span class="feat-pt-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></span>Diffs are computed on Zod-validated component snapshots, never on rendered images.</li>
|
||||
<li><span class="feat-pt-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></span>Output is a standard unified patch string — parseable by any diff tooling in your stack.</li>
|
||||
<li><span class="feat-pt-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></span>CI/CD can consume the patch directly — block merges, post PR comments, or trigger alerts on specific prop changes.</li>
|
||||
</ul>
|
||||
<a href="#" class="btn btn-primary">Request early access</a>
|
||||
</div>
|
||||
@@ -499,9 +499,9 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
|
||||
<h2 class="d3">Accept or reject<br>individual prop changes.</h2>
|
||||
<p class="subtitle">Reviewers are not forced to approve or reject an entire diff. Each prop change is an independent item — cherry-pick what ships and what goes back, with a full audit trail recorded per decision. No more all-or-nothing PR approvals on design work.</p>
|
||||
<ul class="feat-pts">
|
||||
<li><span class="feat-pt-icon">△</span>Check a single prop to accept it without touching adjacent changes in the same diff.</li>
|
||||
<li><span class="feat-pt-icon">△</span>Rejected changes surface as inline comments on the originating artboard in real time.</li>
|
||||
<li><span class="feat-pt-icon">△</span>Every accepted change is recorded in the merge commit metadata — zero ambiguity in history.</li>
|
||||
<li><span class="feat-pt-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></span>Check a single prop to accept it without touching adjacent changes in the same diff.</li>
|
||||
<li><span class="feat-pt-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></span>Rejected changes surface as inline comments on the originating artboard in real time.</li>
|
||||
<li><span class="feat-pt-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></span>Every accepted change is recorded in the merge commit metadata — zero ambiguity in history.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feat-vis feat-vis-dark reveal">
|
||||
@@ -636,19 +636,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/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>Every prop change made in a Live Artboard is recorded as an Intent Diff entry automatically — edits accumulate into a reviewable, shippable patch without any extra steps from the designer.</p>
|
||||
<span class="related-link">Explore Live Artboard →</span>
|
||||
</a>
|
||||
<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>Diffs are indexed into the Origin Graph, making it queryable which components changed most frequently, which props are most volatile, and who last touched any given node in the tree.</p>
|
||||
<span class="related-link">Explore Origin Graph →</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>The Agent Bridge exposes diffs as MCP tool responses. Ask Cursor or Claude Code to apply the accepted diff for any component and the agent writes the prop changes directly into your codebase.</p>
|
||||
<span class="related-link">Explore Agent Bridge →</span>
|
||||
|
||||
Reference in New Issue
Block a user