Repository documents remain in their original published languages. This guide does not translate external pages.
01Agent install
Install with your agent
Copy the prompt for your agent. It will check the environment and conflicts before following the repository setup and verification instructions.
Help me set up Codex Design Skills from the public GitHub repository duxinrui9-gif/codex-design-skills. Read its README, installation instructions, license and source notices first. Check my environment, dependencies and existing same-name installations. Inspect the install script before running it. Use the non-overwriting default installation and run python3 scripts/verify.py. Do not overwrite existing files or expose personal data. Stop on conflicts, permission failures or uncertain sources. Run the repository's documented checks and report installation location, version, results and first-use instructions.Prepare
You need a working Codex environment and the dependencies listed in the repository. Check for existing same-name Skills, review the license and source notices, and use a separate checkout.
Install
After reading the scripts, run the default installer from the repository. It refuses same-name conflicts; do not use replacement options for a first install.
./scripts/install.sh
python3 scripts/verify.pyThe installer does not set up optional design services, browser tools or other runtime dependencies for you.
First use
Start with one low-risk design task. State the audience, objective, available material, constraints and acceptance checks. Ask for a direction before authorizing production.
Check the result
Confirm the installed Skills are discoverable, the repository check passes, and the first task follows your boundaries. Installation alone does not validate a design.
Next practice: DESIGN.md and visual identity
DESIGN.md records shared design judgement. A visual-identity manual turns an agreed direction into reusable rules. Define the judgement before producing the manual.
| Document | Purpose | Stage |
|---|---|---|
| DESIGN.md | Character, hierarchy and interaction principles | Direction-setting and ongoing work |
| Identity manual | Consistent logo, color, type, graphics and applications | After direction approval |
A list of colors and fonts is not enough. Record users, contexts, priorities, undesired visual tendencies and appropriate density.
Gather limited, usable materials
Prepare the brand, business goal, audience, confirmed text, usable visuals and constraints. Exclude uncertain imagery, unsupported claims and private client material.
Ask who will see the work, what they should understand first and which familiar design conventions do not fit.
Define a direction
Develop two or three genuinely different directions, each with character, color tendencies, layout rhythm, imagery and exclusions. A primary-color swap is not a different concept.
Write DESIGN.md
Include users and contexts, brand words and anti-words, information hierarchy, color and type principles, imagery limits, components, interactions, accessibility, narrow-screen requirements and acceptance checks.
Anti-words matter: a precise, quiet and trustworthy design might explicitly avoid heavy decoration, excessive glow and generic cards.
Build the identity rules
| Module | Minimum useful content |
|---|---|
| Logo | Clear space, minimum size, background use and misuse |
| Color | Primary, secondary, neutral, text and status roles |
| Type | Heading, body and annotation hierarchy |
| Graphics | Icons, lines, shapes and image cropping |
| Layout | Grid, margins, density and narrow-screen behavior |
| Application | A page or material showing the rules in use |
Values can evolve, but explain the purpose of each rule.
AI imagery boundaries
AI imagery can explore mood and composition. It is not automatically publishable evidence. Define subject, framing, color, text-safe space, exclusions and dimensions; inspect text, anatomy, marks, cultural meaning and usage rights.
Use confirmed materials for people, clients, products and factual information. Do not imply an unverified fact through an image.
From web draft to a reviewable manual
HTML can organize sections, swatches and examples. Check navigation, contrast, small text, tables, narrow-screen layouts and whether examples follow the rules. Remove unconfirmed material before export. Exportability is not acceptance.
Common questions
Can I start with incomplete research?
Yes, within known boundaries. Mark uncertainty rather than filling it with guesses.
Identity manual or website first?
Agree the direction and basic rules, then use a website to test them. Feed useful findings back into the rules.
What if the output looks complete but feels wrong?
Return to users, context and anti-words. Ask how each decision serves the goal. Fix hierarchy, readability and consistency before adding decoration.
Completion standard
A new collaborator should understand the design judgement from DESIGN.md and make consistent choices from the identity manual. Add reviewed applications as the system evolves.
Source and license
The compilation and adaptation use Apache-2.0. Individual upstream materials retain their own notices and licenses; consult the repository before reuse.