web-design-direction-system
Use for premium frontend, website, app UI, landing page, dashboard, redesign, image-to-code, or visual-polish work that needs clearer design intent, adjustable visual direction, motion discipline, less generic output, and a final preflight check before handoff.
npx skills add TheGoat395/Codex-Skills --skill web-design-direction-system --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Web Design Direction System Use this as the high-level router before detailed build, redesign, or polish work. ## Infer The Design Mode Before choosing components or CSS, write a compact design read: - product type: marketing site, product UI, dashboard, portfolio, service business, commerce, docs, app shell, or campaign - user state: browsing, evaluating, comparing, buying, onboarding, operating, recovering, or managing - brand posture: quiet, precise, editorial, luxurious, playful, industrial, technical, cinematic, utilitarian, or warm - density need: sparse, normal, dense, or expert-dense - motion need: none, small tactile, section choreography, scroll scene, spatial/canvas, or demo-like Turn those choices into concrete layout, type, color, media, and motion decisions. ## Direction Dials Set these dials from 1 to 10 before designing when the brief is open-ended: - `layout_variance`: 1 centered conventional, 5 balanced asymmetry, 10 experimental composition - `motion_depth`: 1 static with hover, 5 section transitions, 10 scroll/canvas/spatial choreography - `surface_density`: 1 spacious editorial, 5 normal product page, 10 compact operator dashboard - `brand_commitment`: 1 neut
- Infer The Design Mode
- Direction Dials
- Design Lanes
- Remove Generic Output
- Redesign Protocol
- Image-To-Code Protocol
- Motion Rules
- Preflight Before Handoff
What does the web-design-direction-system skill do?
Use for premium frontend, website, app UI, landing page, dashboard, redesign, image-to-code, or visual-polish work that needs clearer design intent, adjustable visual direction, motion discipline, less generic output, and a final preflight check before handoff.
How do I install it?
Run `npx skills add TheGoat395/Codex-Skills --skill web-design-direction-system --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From TheGoat395/Codex-Skills, a repository with 115 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.