Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+21 moreClaude CodeCursorCodex CLIMuseDots
Manus
Grok
Grok Bot+18 agentsStitch Interface Blueprints
Turn rough product ideas into precise design briefs that make Google Stitch generate usable web and mobile screens on the first pass.
Free
Stitch Interface Blueprints
Example session with this skill installed
I'm designing the admin dashboard for our freight broker tool at /workspace/logistics-admin; features.md lists the modules — shipments, drivers, alerts, reports. Write a Google Stitch brief for a desktop 1440px operations dashboard: a metric row, a filterable shipments table with status pills, and a side detail panel. Include the states we care about (loading, empty filter results, overdue alerts, selected row) and pick a dense-but-readable visual direction. Then give me the export checklist so I can drop the resulting HTML into our React codebase cleanly.
- Read your context and instructions
- Compiled the stitch interface blueprints
Summary
Stitch brief for the 1440px freight-ops dashboard: persona (dispatchers scanning 40+ loads), core job (spot and resolve exceptions), required blocks, five states, and a named style direction — plus the pre-export checklist.
Operations dashboard for a freight broker, used by dispatchers.
Main job: spot delayed loads and resolve exceptions in one glance.
Required elements:
- Persistent left nav: shipments, drivers, alerts, reports
- Metric row: delayed loads, in transit, on-time rate, open tickets
- Filtered shipments table with status pills and quick actions
- Side panel: stop ETA, driver, paperwork for selected shipment
States: loading skeleton, empty filter result, overdue alert badge,
selected row, payment/API error banner.
Visual direction: enterprise-dense — neutral gray surfaces, amber
alerts, 12px row padding, right-aligned numbers, persistent headers.
Constraints: desktop web 1440px, WCAG AA, text status not color-only.
| Prompt gap | Before | After |
|---|---|---|
| User task | missing | dispatcher resolves exceptions |
| States | happy path only | 5 explicit states |
| Style | "modern" | enterprise-dense with spacing notes |
Next steps
- Paste the brief into Stitch; generate one pass before touching anything.
- Annotate only weak blocks (padding, button hierarchy) — don't regenerate.
- Run the export checklist, then extract StatCard and ShipmentRow components into React.
Connects securely to your tools. The creator never sees your data.
About this skill
Product teams often waste time on generic UI generations that lack the necessary hierarchy, states, or accessibility for real-world use. This skill provides a structured framework for generating precise design briefs that ensure Google Stitch delivers functional, high-fidelity web and mobile screens on the first attempt.
What it does
- Brief construction generates structured prompts covering user persona, core tasks, and platform constraints.
- Component definition specifies exact UI elements like data tables, metric rows, and navigation patterns.
- State mapping forces inclusion of loading skeletons, empty states, and validation errors.
- Visual direction translates vague terms like "modern" into concrete layout densities and color tokens.
- Flow orchestration organizes multi-screen sequences for signup, checkout, or onboarding.
How it works
- Define the scene by describing the user and the specific job they need to perform.
- Apply the skeleton using the provided prompt structure for surface, elements, and states.
- Inject accessibility by adding specific constraints for contrast, touch targets, and focus states.
- Iterate via annotations to refine specific components without losing the overall layout.
Frameworks & tools
Google Stitch, Figma, React, Vue, Svelte, and standard HTML/CSS environments.
Why this beats prompting it yourself
Raw prompts usually lack the information hierarchy needed for a usable interface, leading to "hallucinated" layouts. This skill enforces a design-first contract that includes edge cases and technical constraints most users forget to mention.
Use cases
- Prototyping quickly generating multi-screen flows for stakeholder reviews.
- Frontend scaffolding creating the first HTML/CSS structure for a new feature.
- Design explorations testing different layout densities for data-heavy admin panels.
- Handoff preparation ensuring generated code uses consistent spacing and naming.
Known limitations
This skill focuses on layout and information design rather than visual asset generation. It requires Google Stitch for the actual rendering.
It produces the briefs, iteration instructions, and review checklists — it does not log into Google Stitch or click export on your behalf. The design-to-code guidance assumes a Node/npm project if you want to productionize exports into React or Vue.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
1 use
Times used to date
Free to use
No account required to browse
Trust & safety
Security scan
Security scan passed 1 month ago
- Free with an Agensi account
Permissions
File Scopes
Terminal access is only for scaffolding the refactor project after export, and file reads are only for reviewing the generated HTML/CSS markup — nothing network-facing is required.