Brief to Interface
Turn a product idea into screen strategy, visual direction, and acceptance checks.
Portable skill pack for AI coding agents
Give your agent a frontend design loop.
Interface Compass turns rough briefs, screenshots, and existing screens into product-specific UI direction, design-system decisions, audit findings, and release checks.
npx skills add https://github.com/thanhaq/interface-compass-skills
Prompt
Use $brief-to-interface to turn this idea into a first-screen UI direction: A calm dashboard for a small architecture studio to track proposals, site visits, deadlines, and references.
Expected shape
Product intent: Help the studio see the next proposal risk and the evidence needed to move work forward. First viewport: Deadline rail, active proposal board, and evidence drawer. Acceptance checks: The next deadline is visible without scrolling. Cards stay stable when status labels change. Keyboard users can open a proposal and add a note.
Seven focused skills
Use one skill, or run the full loop.
Design System Starter
Create practical tokens, component contracts, state rules, and migration steps.
Reference to Implementation
Translate screenshots and references into implementation choices without copying protected assets.
Motion and Interaction
Add purposeful hover, focus, loading, transition, and reduced-motion behavior.
Product Surface Copy
Improve labels, empty states, errors, success messages, and settings descriptions.
Interface Quality Audit
Find UI debt and return prioritized fixes grounded in evidence and verification steps.
Shipshape Frontend
Run a final responsive, accessibility, content-fit, and state coverage pass before release.
Evaluation friendly
Built so people can judge it quickly.
The repo includes validation, CI, release notes, examples, issue templates, and a discussion thread for real prompt reports. It is meant to be tested in public rather than hidden behind a vague claim.