skills.rest
Dragoon0x
Dragoon0xCOMMUNITY
Explore all skills by this author →
Website𝕏@0xDragoonLabGitHub

plan-design

Generate structured design plans aligned with existing codebase design constraints.

4|Updated Apr 11, 2026
Search Tags:#accessibility#ui-design#design-system#responsive-design#design-tokens#feature-planning#design-planning
One-click install
npx skills add https://github.com/Dragoon0x/dragoon-skills --skill plan-design-dragoon0x
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: plan-design
Source: https://github.com/Dragoon0x/dragoon-skills/tree/main/skills/plan-design
Command: npx skills add https://github.com/Dragoon0x/dragoon-skills --skill plan-design-dragoon0x

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill eliminates the risk of inconsistent UI design that deviates from your codebase's existing design system, reducing rework and ensuring a cohesive user experience across new features.

Core Features & Use Cases

  • Constraint-Aligned Planning: Auto-loads your codebase's design constraints (spacing grid, type ratio, color palette, font families) to ensure all plans match your existing design DNA.
  • Comprehensive Plan Structure: Generates sections for core user moments, screen and flow breakdowns, required new design tokens, accessibility requirements, responsive guidelines, and a review checklist gated on your design quality scores.
  • Use Case: When building a new user invites feature, use this Skill to generate a full design plan that aligns with your existing design tokens and includes accessibility and responsive requirements before any implementation starts.

Quick Start

Use the plan-design skill to generate a structured design plan for your new UI feature.

Frequently Asked Questions about plan-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a design plan that matches my codebase's existing design system?▼

To generate a design plan matched to your codebase, this Skill auto-loads your existing design constraints like spacing grids and color palettes to ensure new UI features align with your current design DNA.

What is the best way to plan UI for new features without breaking design consistency?▼

Planning UI for new features without breaking consistency requires generating structured pre-development plans that include constraint references, screen breakdowns, and accessibility requirements gated on design quality scores.

How do I structure a design plan to include accessibility and responsive guidelines?▼

Structuring a design plan with accessibility and responsive guidelines involves generating comprehensive sections for core user moments, required new design tokens, and specific review checklists gated on design quality scores.

Can I auto-load design tokens from my codebase to plan new user flows?▼

Yes, you can auto-load design tokens from your codebase to plan new user flows, ensuring the generated design plan aligns with your existing type ratios, font families, and color palettes before implementation starts.

Does this design planning approach work for pre-development workflows?▼

Yes, this design planning approach is specifically built for pre-development workflows, allowing you to define screen breakdowns and custom design tokens for new features before any code implementation begins.

When should I use a constraint-aligned design plan instead of ad-hoc UI design?▼

You should use a constraint-aligned design plan instead of ad-hoc UI design when building new screens or user flows, as it eliminates inconsistent UI implementation and reduces rework across new features.

Related Skills

Explore More Design & Creative Skills→
loianeloiane
50

brownfield-onboarding

Onboard an existing Spring codebase into a spec-driven workflow with baseline and design doc.

Community
Advanced
jfrometajfrometa

tailwind-patterns

Implement CSS-first Tailwind v4 patterns with container queries and design tokens.

Community
Advanced
namanchopranamanchopra
5

plan-founder-review

Review technical plans for completeness, risk coverage, and codebase alignment.

Community
Advanced
aztr0nutzsaztr0nutzs
2

frontend-design-ultimate

Generate React, Tailwind CSS, and shadcn/ui static websites from text descriptions.

Community
Advanced