Communitygithub.com

alty-oss/dev-design

Use when establishing a distinctive visual direction for a new UI or an intentional redesign.

What is dev-design?

dev-design is a Claude Code agent skill that use when establishing a distinctive visual direction for a new UI or an intentional redesign.

Works with✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alty-oss/dev-design/tree/HEAD/skills/art-direction

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

Documentation

Art direction

Português (Brasil) Read the included frontend-design guidance before choosing the direction. Use its specific visual principles alongside the brief and project constraints. Read brief.md and existing constraints. For new products/redesigns propose two materially different directions, each grounded in the audience, content and job. Compare hierarchy, composition, type and emphasis, not just palette swaps. Record the chosen direction, rationale and decision status/source in direction.md. If choices were delegated, select the best fit and record delegated. Otherwise resolve the material decision before implementing a new direction. Follow the original two-pass process:

  1. Plan 4–6 named hex colors, typefaces and roles, layout concept and ASCII wireframe with alignment, and distinctive principles.
  2. Compare against the brief and a plausible similar product. Revise choices that would look identical across unrelated subjects; record the change and reason. Explicit user direction wins, including styles mentioned as clichés by the source. A project with an existing identity normally reuses it. Use real content. Concentrate expression in one memorable element; support it with disciplined hierarchy. Explain missing fonts/assets and use an intentional fallback rather than assuming a service is available.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

Related Skills