Design Dna
zanwei/design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…
Official agent skill
UI Design
by aws-samples in aws-samples/sample-multi-agent-orchestration-chat-on-agentcore
UI/UX design rules, Atomic Design placement, design tokens, component conventions, and responsive patterns for the Moca frontend.
Install UI Design
$ npx skills add aws-samples/sample-multi-agent-orchestration-chat-on-agentcore --skill ui-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install aws-samples/sample-multi-agent-orchestration-chat-on-agentcore ui-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/aws-samples/sample-multi-agent-orchestration-chat-on-agentcore.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/ui-design .claude/skills/ui-design && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "ui-design" agent skill from https://github.com/aws-samples/sample-multi-agent-orchestration-chat-on-agentcore/tree/main/.agents/skills/ui-design into .claude/skills/ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/aws-samples/sample-multi-agent-orchestration-chat-on-agentcore/tree/main/.agents/skills/ui-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add aws-samples/sample-multi-agent-orchestration-chat-on-agentcore --skill ui-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install aws-samples/sample-multi-agent-orchestration-chat-on-agentcore ui-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/aws-samples/sample-multi-agent-orchestration-chat-on-agentcore.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/ui-design .agents/skills/ui-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ui-design" agent skill from https://github.com/aws-samples/sample-multi-agent-orchestration-chat-on-agentcore/tree/main/.agents/skills/ui-design into .agents/skills/ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add aws-samples/sample-multi-agent-orchestration-chat-on-agentcore --skill ui-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install aws-samples/sample-multi-agent-orchestration-chat-on-agentcore ui-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/aws-samples/sample-multi-agent-orchestration-chat-on-agentcore.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/ui-design .cursor/skills/ui-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ui-design" agent skill from https://github.com/aws-samples/sample-multi-agent-orchestration-chat-on-agentcore/tree/main/.agents/skills/ui-design into .cursor/skills/ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/aws-samples/sample-multi-agent-orchestration-chat-on-agentcore.git --path .agents/skills/ui-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add aws-samples/sample-multi-agent-orchestration-chat-on-agentcore --skill ui-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install aws-samples/sample-multi-agent-orchestration-chat-on-agentcore ui-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/aws-samples/sample-multi-agent-orchestration-chat-on-agentcore.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/ui-design .gemini/skills/ui-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "ui-design" agent skill from https://github.com/aws-samples/sample-multi-agent-orchestration-chat-on-agentcore/tree/main/.agents/skills/ui-design into .gemini/skills/ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install aws-samples/sample-multi-agent-orchestration-chat-on-agentcore ui-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add aws-samples/sample-multi-agent-orchestration-chat-on-agentcore --skill ui-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/aws-samples/sample-multi-agent-orchestration-chat-on-agentcore.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/ui-design .github/skills/ui-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "ui-design" agent skill from https://github.com/aws-samples/sample-multi-agent-orchestration-chat-on-agentcore/tree/main/.agents/skills/ui-design into .github/skills/ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add aws-samples/sample-multi-agent-orchestration-chat-on-agentcore --skill ui-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install aws-samples/sample-multi-agent-orchestration-chat-on-agentcore ui-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/aws-samples/sample-multi-agent-orchestration-chat-on-agentcore.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/ui-design .opencode/skills/ui-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ui-design" agent skill from https://github.com/aws-samples/sample-multi-agent-orchestration-chat-on-agentcore/tree/main/.agents/skills/ui-design into .opencode/skills/ui-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
ui-design- GitHub stars
- 130
- Token cost
- ~1.5k tokens
- SKILL.md length
- 571 words
- Files
- 1
- Skills in repo
- 5
- Repo updated
- First seen
- Licence
- MIT-0
At a glance
UI/UX design rules, Atomic Design placement, design tokens, component conventions, and responsive patterns for the Moca frontend.
- Works in 4 steps: Clarity - Immediate visual feedback,… → Consistency - Reuse existing components… → Efficiency - Minimize steps; support ⌘K… → …
- Modifying React components
- SKILL.md covers Design Principles, Architecture Rules, Design Token System and Component Conventions, plus 5 more sections
- Calls modal
What it does
UI Design is an agent skill from aws-samples/sample-multi-agent-orchestration-chat-on-agentcore, published by the product's own GitHub organization. UI/UX design rules, Atomic Design placement, design tokens, component conventions, and responsive patterns for the Moca frontend. Use when creating or modifying React components, styling, or layout.
Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering UI design, Design tokens and React components. The repository describes itself as: Build & Share AI agents with your team. Full AgentCore, Full Serverless, Full TypeScript Sample. The licence is MIT-0.
When your agent uses it
- Modifying React components
- Tasks that involve UI design
- Tasks that involve Design tokens
Example prompts
- “/ui-design”
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- Clarity - Immediate visual feedback, visible system state, no ambiguous labels
- Consistency - Reuse existing components and patterns; do not create duplicates
- Efficiency - Minimize steps; support ⌘K Command Palette and keyboard shortcuts
- Accessibility - WCAG 2.1 AA, 4.5:1 contrast, keyboard navigation, ARIA labels
What it can do on your machine
Read from SKILL.md and the folder at commit 297d9c9. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
modal
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
UI Design loads about 1.5k tokens when it runs. Until then it costs about 52 tokens; SKILL.md has 571 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from aws-samples/sample-multi-agent-orchestration-chat-on-agentcore at commit 297d9c9, republished under its MIT-0 licence (© aws-samples). 571 words, ~1,495 tokens.
Download SKILL.mdSave it as
.claude/skills/ui-design/SKILL.md (or your agent's skills folder).- name
- ui-design
- description
- UI/UX design rules, Atomic Design placement, design tokens, component conventions, and responsive patterns for the Moca frontend. Use when creating or modifying React components, styling, or layout.
UI Design Guide
UI/UX design rules and conventions for the Moca frontend. Built with React, Tailwind CSS, and Atomic Design methodology.
Design Principles
- Clarity - Immediate visual feedback, visible system state, no ambiguous labels
- Consistency - Reuse existing components and patterns; do not create duplicates
- Efficiency - Minimize steps; support
⌘KCommand Palette and keyboard shortcuts - Accessibility - WCAG 2.1 AA, 4.5:1 contrast, keyboard navigation, ARIA labels
Architecture Rules
Atomic Design Placement
| Level | Location | Description | Rule |
|---|---|---|---|
| Atoms | components/ui/*/ | Smallest building blocks (Button, Input, Card, Badge, Toggle, Alert, etc.) | No business logic. Pure presentation. Highly reusable. |
| Molecules | components/ui/*/ | Composed atoms (Modal, FormField, DropdownMenu, SearchSection, NavItem, etc.) | Simple interactions, internal UI state only. Reusable across features. |
| Organisms | components/*.tsx, components/triggers/ | Feature-specific complex UI (ChatContainer, SessionSidebar, AgentForm, etc.) | May contain business logic. Connect to Zustand stores and hooks. |
| Templates | layouts/ | Page-level layout structure (MainLayout) | Defines responsive shell, sidebar, routing outlet. |
| Pages | pages/ | Route-specific content (ChatPage, AgentsPage, ToolsPage, etc.) | Connect templates with data and route params. |
Where to place new components
- Reusable, no business logic →
components/ui/{ComponentName}/ - Feature-specific, complex →
components/root orcomponents/{feature}/ - Auth-related →
features/auth/ - New page →
pages/
Design Token System
All design tokens are defined as CSS Custom Properties in src/index.css :root and consumed via tailwind.config.js.
Token categories: brand, action, surface, border, fg (foreground/text), feedback
Key rule: Always prefer semantic tokens over raw values.
| Do ✅ | Don't ❌ |
|---|---|
bg-action-primary | bg-blue-600 |
text-fg-secondary | text-gray-600 |
border-border | border-gray-200 |
bg-feedback-error-bg | bg-red-50 |
rounded-btn | rounded-lg (for buttons) |
shadow-elevation-2 | shadow-md |
Exception: hover:bg-gray-100 and similar hover states where no semantic token exists.
Reference files: src/index.css (token definitions), tailwind.config.js (Tailwind mapping)
Component Conventions
When creating or modifying UI components, follow these patterns. Reference existing implementations rather than starting from scratch:
Standard Patterns
- Variant/Size style maps — Use
Record<NonNullable<Props['variant']>, string>for variant styles. SeeButton.tsx,Card.tsx. React.forwardRef— Use for DOM-interacting atoms (Button, Input, Card). Always setdisplayName.loadingprop — Replaces icon withLoader2spinner, disables the button. SeeButton.tsx,Toggle.tsx.- Icon props — Use
LucideIcontype fromlucide-react. SeeButton.tsx(leftIcon,rightIcon),IconButton.tsx(icon). classNameoverride — All components must acceptclassNameprop, applied viacn().cn()utility — Always usecn()fromlib/utils.ts(clsx+tailwind-merge) for class composition.
Show full SKILL.md (218 more words)Show less
Reference Files for New Components
| Creating a... | Study this file |
|---|---|
| New atom | components/ui/Button/Button.tsx, components/ui/Card/Card.tsx |
| New molecule | components/ui/FormField/FormField.tsx, components/ui/DropdownMenu/DropdownMenu.tsx |
| New modal | components/ui/Modal/Modal.tsx, components/ui/Modal/ConfirmModal.tsx |
| New page header | components/ui/PageHeader/PageHeader.tsx |
Typography
- Font: M PLUS Rounded 1c (defined in
tailwind.config.jsfontFamily.sans) - Body text:
text-sm text-fg-default - Secondary text:
text-sm text-fg-secondary - Labels:
text-sm font-medium text-fg-secondary - Page headings:
text-xl font-semibold text-fg-default
Responsive Design
3 breakpoints managed via window.matchMedia in MainLayout.tsx and uiStore:
| Breakpoint | Range | Sidebar | Header |
|---|---|---|---|
| Mobile | < 768px | Overlay (z-50), swipe gestures | Fixed hamburger bar |
| Narrow Desktop | 768px - 1024px | Auto-collapsed (w-16, icon-only) | None |
| Wide Desktop | > 1024px | User-controlled (w-80 / w-16) | None |
- Mobile swipe:
useSwipeGesturehook PageHeaderauto-hides on mobile (returnsnull;MainLayouthandles mobile header)Modal size="xl"renders full-screen on mobile
State Management
- Zustand with 12 stores in
stores/— 1 domain = 1 store - Use selectors:
useAgentStore((state) => state.agents) - Derived selectors:
useSelectedAgent()pattern - Responsive UI state:
uiStore(isSidebarOpen,isMobileView,isNarrowDesktop)
Internationalization
- react-i18next — Config in
src/i18n/, translations insrc/locales/ - Usage:
const { t } = useTranslation(); - Agent names/descriptions:
translateIfKey()utility
Anti-patterns (Do NOT)
- ❌ Use raw gray values (
bg-gray-200) when a semantic token exists (border-border) - ❌ Use legacy CSS classes (
.button-primary,.input-field,.message-bubble) — use component-level Tailwind instead - ❌ Create a new component when an existing one in
components/ui/fits the need - ❌ Use
anytype — useunknownor proper types - ❌ Hardcode colors — always use design tokens
- ❌ Skip
classNameprop on reusable components - ❌ Forget
displayNameonforwardRefcomponents
© aws-samples, MIT-0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/ui-design of aws-samples/sample-multi-agent-orchestration-chat-on-agentcore.
Open the folder on GitHubat commit 297d9c9
Compare with similar skills
UI Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| UI Design this skillaws-samples/sample-multi-agent-orchestration-chat-on-agentcore | 130 | — | ~1.5k | Automated safety check: Pass | MIT-0 | |
| Design Dnazanwei/design-dna | 1.9k | 1 repos | ~2.1k | Automated safety check: Pass | MIT | |
| Figma Design to Codewarpdotdev/warp | 65k | 4 repos | ~2.9k | Automated safety check: Pass | AGPL-3.0 | |
| Creative Tim UI Blockscreativetimofficial/ui | 12k | — | ~2.1k | Automated safety check: Notes | MIT | |
| Design Guidepaperclipai/paperclip | 98k | 1 repos | ~3.1k | Automated safety check: Pass | MIT | |
| Web Designxiaopu-ai/web-design | 783 | — | ~3k | Automated safety check: Pass | MIT |
Similar skills
Figma Design to Code
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
Creative Tim UI Blocks
creativetimofficial/ui
Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.
Design Guide
paperclipai/paperclip
Paperclip UI design system guide for building consistent, reusable frontend components.
Web Design
xiaopu-ai/web-design
Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词（任意组合），先产出一份标准化 DESIGN.md 设计规范，用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端：Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX…
Liuguang Banlan UI
sickn33/agentic-awesome-skills
Implements an interface in one of two named color modes, iridescent white or colorful black, from a parameterized starter that reports measured color intensity.
More from aws-samples/sample-multi-agent-orchestration-chat-on-agentcore
- Official
Deep Modules
aws-samples/sample-multi-agent-orchestration-chat-on-agentcore
Apply Ousterhout's "deep modules" principle (narrow interface, deep implementation) when designing or refactoring classes and modules.
- Official
Moca Guide
aws-samples/sample-multi-agent-orchestration-chat-on-agentcore
How to use Moca itself — what this platform can do and how to ask for it.
- Official
Doc Drift Detection
aws-samples/sample-multi-agent-orchestration-chat-on-agentcore
Detect semantic drift between documentation and source code.
- Official
Coding Style
aws-samples/sample-multi-agent-orchestration-chat-on-agentcore
Design decisions, implicit rules, and anti-patterns for the Moca project.
Related
Categories
Questions about UI Design
What does UI Design do?
UI/UX design rules, Atomic Design placement, design tokens, component conventions, and responsive patterns for the Moca frontend. UI Design is an agent skill from aws-samples/sample-multi-agent-orchestration-chat-on-agentcore, published by the product's own GitHub organization. UI/UX design rules, Atomic Design placement, design tokens, component conventions, and responsive patterns for the Moca frontend.
When should I use UI Design?
UI Design fits situations like: modifying React components; tasks that involve UI design; tasks that involve Design tokens.
How do I install UI Design in Claude Code?
Run `npx skills add aws-samples/sample-multi-agent-orchestration-chat-on-agentcore --skill ui-design -a claude-code`. Or copy the skill folder (.agents/skills/ui-design in aws-samples/sample-multi-agent-orchestration-chat-on-agentcore) into .claude/skills/ui-design in your project. Claude Code loads it when a task matches its description.
How do I install UI Design in Codex?
Run `npx skills add aws-samples/sample-multi-agent-orchestration-chat-on-agentcore --skill ui-design -a codex`. Or copy the skill folder (.agents/skills/ui-design in aws-samples/sample-multi-agent-orchestration-chat-on-agentcore) into .agents/skills/ui-design in your project. Codex loads it when a task matches its description.
Can I use UI Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add aws-samples/sample-multi-agent-orchestration-chat-on-agentcore --skill ui-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-design, .gemini/skills/ui-design, .github/skills/ui-design and .opencode/skills/ui-design in your project.
What does UI Design need to run?
Going by SKILL.md and its folder, UI Design needs the command-line tools its instructions call (modal).
Does UI Design access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is UI Design safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does UI Design use?
UI Design is published under the MIT-0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does UI Design use?
About 1.5k tokens (SKILL.md is roughly 6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to UI Design?
Skills that share tags, products or a category with UI Design: Design Dna (zanwei/design-dna, 1.9k stars), Figma Design to Code (warpdotdev/warp, 65k stars), Creative Tim UI Blocks (creativetimofficial/ui, 12k stars) and Design Guide (paperclipai/paperclip, 98k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains UI Design?
aws-samples (a GitHub organization, an official publisher) maintains it in aws-samples/sample-multi-agent-orchestration-chat-on-agentcore, which has 130 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 6, 2026.
Source: aws-samples/sample-multi-agent-orchestration-chat-on-agentcore on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.