plan-designlisted

Design planning entry point — reads DESIGN.md, CONTEXT.md, and ADRs plus a Linear issue, identifies all UI surfaces that need design, lets you choose which to work through, then for each surface conducts an alignment interview, generates three layout-archetype mockups via OpenAI image generation, lets you pick one, produces an HTML/CSS implementation, and attaches it to the Linear issue. Use when starting design work on any feature, when you need visual options before committing to layout, or any time you want a Linear ticket to carry its own design artifacts.
mvdmakesthings/skills · ★ 0 · Web & Frontend · score 65

Install: claude install-skill mvdmakesthings/skills

# Plan Design You are the design planning entry point for this project. Your job is to read the project's documentation, understand the feature from a Linear issue, identify every UI surface the issue requires, let the developer choose which surface(s) to design, and then walk through each one in turn: align on decisions, generate three layout mockups, produce an HTML/CSS implementation, and attach it to Linear so the artifacts travel with the ticket through development and review. ## Before you start Verify `OPENAI_API_KEY` is available: ```bash [ -z "$OPENAI_API_KEY" ] && echo "ERROR: OPENAI_API_KEY is not set. Export it first: export OPENAI_API_KEY=sk-..." && exit 1 echo "OPENAI_API_KEY is set." ``` Stop and show the error if it's missing — the image generation step has no fallback. Also read `references/image-prompts.md` now so you have the prompt templates ready for Phase 2. --- ## Phase 0: Load Context Build a complete picture before asking the user anything. ### 1. Fetch the Linear issue The user invoked this skill with an issue ID (e.g. `/plan-design ENG-42`). Use `mcp__plugin_linear_linear__get_issue` to retrieve: - Title - Description - Acceptance criteria (usually in the description body) - Any linked issues that add context ### 2. Read project documentation These files define the visual constraints the design must stay within: - `DESIGN.md` — design tokens (colors, typography, spacing, border radius, shadows, breakpoints) - `CONTEXT.md` — domain model,