direction-picker
Helps your agent decide the visual direction of the design automatically. It uses project rules to do this without asking.
What it does
This tool decides the visual style (colors, fonts, etc.) for a project before building starts. It chooses the style based on existing rules or provided information, without needing to ask you.
When to use it
- ✓When you want the AI to decide the visual style for a website.
- ✓When starting a new design or development project.
- ✓To ensure everyone follows the same visual style.
Example of what to ask your AI
“AI, define the visual style for this project based on the design guidelines.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool first checks if a design system is defined. If not, it analyzes the information provided by the user, such as a reference website or brand specifications. If that's still not enough, it uses the project's context to guess the best style.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill direction-pickerOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/atoms/direction-picker/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Direction picker
Converging work needs one committed visual direction before the build starts.
This atom owns that moment in the plan stage: decide the direction, state it
in one line, and lock onto it.
Resolve the direction from what you already have, in this order:
- An active design system — its DESIGN.md palette, typography, spacing, and component rules are the direction. Bind its tokens and stop here.
- A brand spec, reference URL, or screenshot the user supplied — parse that source directly.
- Otherwise, infer the best-matching direction yourself from the brief's
domain, audience, and tone, then bind its visual tokens. If the runtime
provides only an index of direction ids and names, run
"$OD_NODE_BIN" "$OD_BIN" tools directions --id <id>to retrieve the full specification — never infer colors or fonts from the name alone.
Do not ask the user to choose a visual direction. Not as a question-form, not as a markdown list of options, not as a "which of these feels right?" follow-up. The direction is yours to resolve; asking spends the user's turn on a decision they hired the agent to make.
Convergence
The atom completes when the plan states the chosen direction. The agent's next turn must build against that direction — backtracking forces a fresh devloop iteration of the plan stage.
Anti-patterns the prompt fragment forbids
- Asking the user to pick, compare, or confirm a visual direction.
- Locking the user into a single direction with cosmetic alternates (a stated direction must be a defensible standalone bet).
- Inferring palette or typography from a direction's name instead of resolving its specification.
FAQ
Why doesn't the AI ask me which style I prefer?
The idea is for the AI to make that decision for you, as you hired it to do so. Asking would waste your time and delay the project.
What happens after the AI decides the style?
Once the style is decided and recorded, the AI must continue working based on that style. Changing your mind later would require redoing the planning stage.
Can the AI invent colors or fonts if it can't find information?
No, the AI should not invent colors or fonts based solely on the style's name. It needs to find the correct specifications or use the information you provided.
Details
Original description by the author
Resolves the visual direction at the plan stage from the brief and design system, without asking the user.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #523
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC