Design Builder

What it does

The Design Builder skill automatically generates detailed construction plans and material lists from textual design descriptions. It operates through a structured pipeline of discovery, extraction, structuring, previewing, and finalization. Each step in this process is independent and can be run individually or chained together to create comprehensive design documentation. The final output can be an HTML document, a format suitable for Paper/Pencil/Figma via Model Context Protocol (MCP), or input for spec-driven implementation.

When to use it

This skill is useful in the following scenarios:

• Creating initial construction plans from textual descriptions of designs.
• Generating material lists and design tokens based on visual references.
• Rapidly prototyping layouts and wireframes.
• Preparing design documentation for review or implementation.
• When needing to extract content from URLs or images to inform the design process.

Key capabilities

• Discovery: Establishes project context by checking existing documents (PRD, brief, brainstorming notes, research) or asking targeted questions about purpose, audience, visual references, and constraints.
• Extraction: Extracts copy and design tokens from URLs or images.
• Structuring: Organizes content into wireframes and layouts based on extracted information.
• Previewing: Generates mockups and variants for design review, incorporating aesthetics and web standards.
• Output Formats: Produces HTML standalone documents, designs compatible with Paper/Pencil/Figma (via MCP), or provides input for spec-driven implementation.
• Context Loading: Automatically loads aesthetics.md and web-standards.md during preview operations.

Example prompts

• "Extract design tokens from this URL: [website address]"
• "Structure the content of copy.md into a wireframe."
• "Preview the design based on design.md, incorporating web standards."
• "What is the project purpose and target audience for this landing page?"

Tips & gotchas

• Discovery is required: Always start with the discovery phase to establish project context.
• Context Dependency: The skill loads specific reference documents based on triggers; multiple simultaneous operations using different references are not supported.
• "I Don't Know": If a question during discovery receives an "I don't know" response, it will be marked as TBD and the process will continue.