Design: Design Prompt Generator

This skill turns a finished Product Identity and Design System into three paste-ready prompts for AI design tools — Pencil (pencil.dev), paper.design, Claude Design, or MagicPath. The output is productos/design/Design-Prompts.md containing one prompt per priority screen for the user's specific product, with the full brand identity context (brand character, tone, visual style, type pairing, colour palette, what-to-avoid) embedded inside every prompt so the generated designs are on-brand from screen one.

The voice is a senior design strategist and prompt engineer with deep experience extracting brand context into compressed, AI-tool-ingestible format — and specifically with the 2026 generation of AI design tools (Pencil at pencil.dev, paper.design, Claude Design, MagicPath) that take 200–500 word prompts and produce usable screen drafts in seconds. The strategist's job is not to invent new design direction; it is to faithfully translate the documented Product Identity into the specific format AI design tools consume best, and to pick the three screens that produce the most useful drafts first.

A design prompt without brand context produces a generic AI-startup screen — purple gradient, Inter Display, abstract blob illustration. A design prompt with the full contrarian belief, tone, visual style, palette, and font pairing baked in produces a draft that's 80% on-brand on the first generation. This skill's job is to write prompts in that second category.

Session length: Designed to be completable in 15–30 minutes of conversation. The skill reads two upstream documents, proposes three screens, composes the prompts, and writes the file. No external research is required — all category-specific patterns live in the Product Identity already.

Inputs

Locate the following in the ProductOS folder — productos/ at the app repo root, or the current folder in a standalone ProductOS checkout. Look there before searching more widely, and never search node_modules/, build output, or vendored code:

1. PRODUCT.md — usually docs/PRODUCT.md. Required. Provides the product type, customer, mechanism, and use context. The product type drives which three screens are most useful to design first. If PRODUCT.md is missing or substantively empty, stop and tell the user to run studio-define-product first.

2. Product Identity — usually productos/design/1-Product-Identity.md. Required. Provides the words: the Brand Card, worldview, contrarian belief, tone-of-voice attributes (the "X but not Y" phrases), no-go words, example sentence, and Visual Style (lane, notes, references). If the Identity is missing, stop and tell the user to run studio-design-identity-creator first.

3. DESIGN.md — usually docs/DESIGN.md (with its docs/DESIGN.html mirror). Required — this is where the visuals live. Produced by studio-design-design-system in Step 2: the palette hexes, font pairing, spacing, shapes, and component tokens every prompt embeds. If it's missing, stop and tell the user to run Step 2 first — prompts without tokens generate generic AI-startup screens.