Use for UI/UX design, product flows, frontend or native interface design, design audits, design translation, asset planning, motion direction, design tokens, or distinctive non-generic apps and websites. Covers web and React, Windows and WinUI/Mica, Apple and SwiftUI, Android and Jetpack Compose/Material, cross-platform UI, and token export. Route to the focused skill, then load only the references required for the selected surface and failure mode.
How to install stark?
f0d010c/stark
$npx -y skills add f0d010c/stark --skill starkInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/f0d010c/stark" --skill "f0d010c/stark"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/f0d010c/stark" that are relevant to the current task. Run `npx skills add "https://github.com/f0d010c/stark"` and select the relevant skills, then follow their instructions.
SKILL.md
| 1 | <p align="center"> |
| 2 | <img src="assets/logo/stark-mark.svg" alt="stark logo" width="96" height="96"> |
| 3 | </p> |
| 4 | |
| 5 | # stark |
| 6 | |
| 7 | [](https://github.com/f0d010c/stark/releases) |
| 8 | [](LICENSE) |
| 9 | [](README.md) |
| 10 | [](README.md) |
| 11 | |
| 12 | UI/UX design plugin for AI coding agents. |
| 13 | |
| 14 | Stark helps agents choose the right product flow, platform idiom, visual direction, motion, assets, and design-token strategy before writing code. The goal is simple: fewer generic template clones, more usable product-specific interfaces. |
| 15 | |
| 16 | ## What It Does |
| 17 | |
| 18 | - Plans UX flows, IA, onboarding, checkout, forms, dashboards, states, recovery paths, and repeated-use ergonomics. |
| 19 | - Routes UI work across web, Windows, Apple, Android, and cross-platform stacks. |
| 20 | - Forces non-generic decisions: desktop archetypes, concept seeds, layout sketches, design recipes, and anti-default rewrites. |
| 21 | - Chooses frontend tracks and motion tools by job: static HTML, Vite React, Next, Astro, CSS, Motion, GSAP, native scroll CSS, Lenis, or no motion. |
| 22 | - Plans assets and references without copying shipped products. |
| 23 | - Generates, audits, and exports W3C DTCG tokens to Tailwind, CSS, Compose, SwiftUI, and WinUI. |
| 24 | |
| 25 | ## Install In Codex |
| 26 | |
| 27 | Use this repository as a Codex plugin source. The Codex manifest lives at: |
| 28 | |
| 29 | ```text |
| 30 | .codex-plugin/plugin.json |
| 31 | ``` |
| 32 | |
| 33 | After installation, restart or reload Codex so the skills are indexed. |
| 34 | |
| 35 | ## Use |
| 36 | |
| 37 | Ask naturally: |
| 38 | |
| 39 | ```text |
| 40 | Design a landing page for a type foundry that does not look like generic SaaS. |
| 41 | Make a Win11 app shell with NavigationView and Mica. |
| 42 | Build an iOS 26 settings screen with Liquid Glass. |
| 43 | Create a Compose Material 3 Expressive workout screen. |
| 44 | Improve the onboarding UX so users reach first value faster. |
| 45 | Design the empty, loading, error, and success states for this dashboard. |
| 46 | Translate this iOS settings screen into a Windows app. |
| 47 | Audit this React hero section for UX problems and AI design slop. |
| 48 | Export these DTCG tokens to Tailwind and SwiftUI. |
| 49 | ``` |
| 50 | |
| 51 | If the platform is ambiguous, Stark asks which target to use instead of silently defaulting to web. |
| 52 | |
| 53 | ## Screenshot Gallery |
| 54 | |
| 55 | The repo keeps proof as screenshots instead of full generated app folders, so the plugin stays small and installable. |
| 56 | |
| 57 | | Project | Desktop | Mobile | |
| 58 | |---|---|---| |
| 59 | | Operator Console | <img src="assets/screenshots/operator-console/desktop.png" alt="Operator Console desktop screenshot" width="360"> | <img src="assets/screenshots/operator-console/mobile.png" alt="Operator Console mobile screenshot" width="180"> | |
| 60 | | BuildDesk | <img src="assets/screenshots/builddesk/desktop.png" alt="BuildDesk desktop screenshot" width="360"> | <img src="assets/screenshots/builddesk/mobile.png" alt="BuildDesk mobile screenshot" width="180"> | |
| 61 | | Artifact Labs | <img src="assets/screenshots/artifact-labs-site/desktop.png" alt="Artifact Labs desktop screenshot" width="360"> | <img src="assets/screenshots/artifact-labs-site/mobile.png" alt="Artifact Labs mobile screenshot" width="180"> | |
| 62 | |
| 63 | ## Tracks |
| 64 | |
| 65 | | Area | Stark covers | |
| 66 | |---|---| |
| 67 | | UX | flows, IA, state design, onboarding, checkout, dashboards, forms, recovery | |
| 68 | | Web | landing pages, apps, dashboards, docs, React/Vite/Next/Astro, motion, assets | |
| 69 | | Windows | WinUI 3, branded Fluent, Tauri, Electron, Mica/Acrylic, desktop archetypes | |
| 70 | | Apple | SwiftUI, Liquid Glass, HIG, iOS/iPadOS/macOS/watchOS/visionOS, desktop shells | |
| 71 | | Android | Compose, Material 3 Expressive, React Native, Flutter, Compose Multiplatform | |
| 72 | | Cross-platform | Tauri, Electron, React Native, Flutter, CMP, Uno, Avalonia, MAUI | |
| 73 | | Tokens | W3C DTCG, Tailwind, CSS variables, Compose, SwiftUI, WinUI | |
| 74 | |
| 75 | ## What's Inside |
| 76 | |
| 77 | ```text |
| 78 | stark/ |
| 79 | .codex-plugin/plugin.json Codex plugin manifest |
| 80 | skills/ routing, UX, web, platform, cross-platform, tokens |
| 81 | references/ design, platform, UX, web, and UI-pattern guidance |
| 82 | assets/logo/ Stark logo SVGs |
| 83 | assets/screenshots/ curated screenshot proof |
| 84 | assets/tokens/ DTCG token bundles |
| 85 | scripts/ platform detection and token export helpers |
| 86 | docs/ usage, review contract, roadmap, public-readiness notes |
| 87 | ``` |
| 88 | |
| 89 | ## Useful Docs |
| 90 | |
| 91 | - [Codex usage](docs/codex-usage.md) |
| 92 | - [Review contract](docs/review-contract.md) |
| 93 | - [Next-level design roadmap](docs/next-level-design-roadmap.md) |
| 94 | - [Design quality measurement](docs/design-quality-measurement.md) |
| 95 | - [Reference governance](docs/reference-governance.md) |
| 96 | - [Public plugin readiness](docs/public-plugin-readi |
Related
6 picksType
- web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site…Jul 2026
- prototypeBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a…Jul 2026
- lark-whiteboard飞书画板：查询和编辑飞书云文档中的画板。支持导出画板为预览图片、导出原始节点结构、使用多种格式更新画板内容。 当用户需要查看画板内容、导出画板图片、编辑画板时使用此 skill。不负责：飞书云文档内容编辑（lark-doc）、文档内嵌电子表格/Base（lark-sheets / lark-base）。Jul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX…Jul 2026
- design-guidePaperclip UI design system guide for building consistent, reusable frontend components.Jul 2026
- impeccableUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or…Jul 2026
