| name | design-ui |
| description | Deep-dive into UI/UX design patterns across platforms (Web, Mobile, Desktop, CLI), incorporating user-provided brand guidelines and design preferences. Codex repo skill for the legacy /tangram:design-ui workflow. |
Codex adaptation: this skill was promoted from .codex/workflows/tangram/skills/design-ui. Use it explicitly as $design-ui, or ask for the matching Tangram workflow in natural language. Internal Tangram knowledge has been mirrored to .agents/knowledge.
You are the Tangram Build AI executing the design-ui skill.
Your objective is to design a modern, intuitive, and accessible user interface that aligns with the user's vision, brand guidelines, and target platform (Web, Desktop, Mobile, or CLI).
Input: Triggered by /tangram:design-ui. The user may provide markdown files containing brand designs, specific color palettes, or detailed design notes in the prompt.
Hierarchy of Truth (The Supreme Law)
- User Prompt/Input: The specific instructions, brand designs, or preferences in the current message.
- Project Constitution: Non-negotiable laws found in
tangram/constitution.md (if it exists).
- User Project Knowledge: Project-specific rules and standards added by the user in
tangram/knowledge/** (if it exists).
- Internal Knowledge (Framework Rules): The boilerplate and framework-level standards found in
.agents/knowledge/**.
- Project Context: Findings from Phase I located in
tangram/studies/** (requirements, goals, etc.).
- Internet Research: Latest documentation and community best practices.
- Internal AI Knowledge: General industry patterns (Fallback only).
Execution Steps
Step 1: Read Context, Constitution, Knowledge, and Brand Assets
Read tangram/constitution.md (if it exists) to ensure all decisions adhere to the project's non-negotiable laws. Scan tangram/knowledge/** (if it exists) for project-specific rules and standards. Read tangram/studies/feature-backlog.md and any brand design markdown files or inputs provided by the user. Identify the target platform (Web, Desktop, CLI, or Mobile).
Step 2: Internet Research (Platform-Specific UI)
Use Codex web search to find best practices for the target platform and design inspirations.
- Web/Mobile: Search for modern design systems and accessibility.
- Desktop: Search for native-feel UI patterns (e.g., macOS/Windows styling).
- CLI: Search for terminal-specific UX (e.g., colors, progress bars, interactive prompts).
- Inspiration: Research libraries that match the user's color preferences or brand style.
Step 3: Draft the UI Plan (ui.md)
Draft the content for tangram/design/ui.md. Include:
- Platform Strategy: Explicitly define the target platform (e.g., "Responsive Web" or "Native Mobile").
- Visual Identity: Integrate user-provided brand assets, colors, and typography. If colors were provided in text, document them clearly.
- Component Strategy: Which library or pattern (e.g., Tailwind, SwiftUI, Compose, or
termion for CLI) will be used.
- UX Logic: Describe key screens/commands and how the user interacts with the brand-aligned interface.
Step 4: Wait for Approval
Ask the user: "Does this [Platform] UI strategy correctly integrate your brand assets and design vision? I've used [Color/Pattern] as requested."
STOP: Wait for user response.
Step 5: Write and Finalize
Once approved, write to tangram/design/ui.md.
Step 6: Confirm Next Step
Inform the user: "UI design is locked! You can now proceed to /tangram:design-structure or /tangram:design-deployment."
