design-md

Overview of design-md skill

What design-md does

The design-md skill turns a Stitch project into a DESIGN.md that captures the semantic design system behind the screens. It is meant for people who need a promptable design source of truth, not just a visual audit. If you are using Stitch to generate new screens and want consistent layout, tone, color, and component language, the design-md skill is built for that job.

Who should use it

Use the design-md skill if you are working in a Stitch project with real screens and want a repeatable way to describe the design system in words. It is a strong fit for product designers, AI-assisted frontend builders, and teams documenting an existing UI so Stitch can generate new UI that stays aligned.

Why this skill is different

The main value of design-md is translation: it reads technical design signals and converts them into natural, reusable design guidance. That matters because Stitch responds best to descriptive design language backed by concrete values, not vague style labels alone. The skill is especially useful when you need a DESIGN.md that can guide future generation instead of a one-off summary of the current screen.

How to Use design-md skill

Install the skill in your Stitch workflow

Install design-md with npx skills add google-labs-code/stitch-skills --skill design-md --global. The repo path is google-labs-code/stitch-skills, and the skill lives under skills/design-md. If your setup is not global, adapt the install pattern to your local skills workflow.

Give it the right starting context

The best design-md usage starts with a clear Stitch target: project name or ID, the screen or flow to analyze, and what you want the resulting DESIGN.md to support. A good prompt says what to document and why, for example: “Analyze my Furniture Collection project’s Home screen and generate a DESIGN.md that can guide new product listing screens.” That is better than asking for a generic design summary because it tells the skill what to optimize for.

Read these files first

For a practical design-md guide, start with SKILL.md for the workflow, then check README.md for install and example usage, and review examples/DESIGN.md to see the expected output shape and level of detail. If you are deciding whether the skill fits your repo or process, those three files give you the fastest signal.

Workflow that improves output quality

Use the skill when you already have at least one designed Stitch screen to analyze. The skill depends on project retrieval and design metadata, so the quality of the resulting DESIGN.md improves when your input includes a real project, a specific screen, and enough context to distinguish intentional style from incidental implementation details. If your goal is broader than a single screen, ask the skill to synthesize across a representative set rather than forcing it to infer a system from one weak sample.

design-md skill FAQ

Is design-md only for Stitch projects?

Yes, the design-md skill is specifically built for Stitch projects and Stitch MCP access. If you are not using Stitch, a generic design prompt or a different documentation workflow will usually be a better fit.

What should I provide before running it?

At minimum, provide a target project or a way to identify it, plus the screen or screen set you want analyzed. The more concrete the target, the less guesswork the skill has to do when building a semantic design system for design-md.

Is the design-md skill beginner-friendly?

Yes, if you can name a project and a screen, you can use it. The main beginner mistake is asking for a design document without giving the skill a real source of truth to analyze. The skill works best when it can inspect actual Stitch assets rather than infer style from a vague prompt.

When should I not use it?

Do not use design-md if you only need a quick visual impression, a marketing-style description, or a one-paragraph UI critique. It is also not the right choice if you cannot access Stitch MCP tools or do not have a project with meaningful design data.

How to Improve design-md skill

Give it a narrower, higher-signal target

The strongest design-md skill outputs come from focused prompts. Specify the exact screen, flow, or project segment you want documented, and say whether you want a foundation-level system, a component-focused system, or a generation-ready prompt guide. That helps the skill prioritize what matters most for reuse.

Share the design decisions that matter

If you already know the constraints that should shape the DESIGN.md, include them up front: brand tone, accessibility expectations, layout density, responsive behavior, or whether the output should favor editorial language over implementation detail. This is especially important for design-md for Design Systems, where the real goal is to preserve repeatable choices rather than describe every visible element.

Watch for the common failure mode

The biggest risk is overfitting to a single screen or mistaking one-off UI content for system rules. Improve the result by asking for distinctions between core tokens, reusable patterns, and screen-specific exceptions. If the first pass is too generic, refine with a second prompt that asks for stronger guidance on color roles, typography hierarchy, spacing logic, and component behavior.

Iterate from the first DESIGN.md

Treat the first output as a draft of the design language, not a final artifact. Review whether it is specific enough for Stitch generation, then ask for revisions that sharpen weak areas such as palette roles, button states, or layout rules. The most useful design-md install outcome is a DESIGN.md that future prompts can actually reuse without re-explaining the system every time.