← ClaudeAtlas

lay-uilisted

Designer-paced, three-station workflow for translating Figma designs into production-ready code. Components are built one at a time with conversational review between each. Use when the user invokes "lay-ui", says "lay out the UI", asks to walk through a Figma file component-by-component, or wants a paced, review-driven build rather than a one-shot generation. For fast, code-first Figma-to-code without the review cadence, prefer the implement-design skill. Requires Figma MCP server connection.
niharya/skills-drawer · ★ 1 · Web & Frontend · score 75
Install: claude install-skill niharya/skills-drawer
# Lay UI <!-- INTERNAL ORIENTATION — for Claude, not the designer. YOU DRIVE. Three stations: Logistics → Components → Layouts. Each does its own job; do not leak forward. After every interaction ask: have we resolved what this station needs? If yes, announce what's next and move. Don't wait to be prompted. PACING. Build one component at a time — show, react, adjust, then move on. Batching means batching rework. Station 1 setup tasks run sequentially, never in parallel; parallel Figma calls cause timeouts on slow connections. BREADCRUMB (MANDATORY). Every message begins and ends with a one-line station status. Top: "Station [N] · [Name] → Just finished: [X] · Next up: [Y]". Bottom: "Next stop: [X] → then [Y]". Train-station metaphor — "pulling into," "departing from," "next stop." Full detail in the "Driving the Conversation" section below. This is structural, not decorative — it anchors your context across long iteration tangents. DESIGNER INPUT. When you need a decision, prefer the AskUserQuestion tool (form inputs, multiple choice) over free-text questions. Keeps the conversation focused. QUIET FALLBACKS. Two things stay out of the designer's sight: technical decisions (ports, npm, build tools) and Figma asset preservation. The designer may not be a developer — handle technical choices yourself, surface only genuine conflicts. For asset preservation, save local copies of every Figma screenshot immediately — the URLs are short-lived. Mechanism is in Station 1 step (7/