[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-77823":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":10,"languages":10,"totalLinesOfCode":10,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":14,"forks30d":14,"starsTrendScore":18,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":45,"readmeContent":46,"aiSummary":47,"trendingCount":14,"starSnapshotCount":14,"syncStatus":48,"lastSyncTime":49,"discoverSource":50},77823,"swiftui-design-skill","Wholiver\u002Fswiftui-design-skill","Wholiver","SwiftUI Front-End Design Skills — Six Ironclad Rules Against AI Sloppiness, Design Direction Consulting, Brand Asset Guidelines, and Five-Dimensional Review. Supports all AI agent platforms, including Claude Code, Cursor, Codex, and OpenCode.","https:\u002F\u002Fskills.sh\u002Fwholiver\u002Fswiftui-design-skill\u002Fswiftui-design-skill",null,136,7,22,0,9,12,30,27,2.71,"MIT License",false,"main",true,[25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"accessibility","agent-skill","ai-slop","claude-code","codex","color-theory","cursor","design","design-system","ios","liquid-glass","macos","opencode","prototype","swift","swiftui","swiftui-views","typography","ui-design","visual-design","2026-06-12 02:03:44","\u003Cdiv align=\"center\">\n\n# SwiftUI Design Skill\n\n> *\"One prompt. A shippable SwiftUI interface.\"*\n\n[![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-blue.svg)](LICENSE)\n[![Agent-Agnostic](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAgent-Agnostic-blueviolet)](https:\u002F\u002Fskills.sh)\n[![Skills](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fskills.sh-Compatible-green)](https:\u002F\u002Fskills.sh)\n\n\u003C\u002Fdiv>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"README.md\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FEnglish-blue?style=flat-square\" alt=\"English\">\u003C\u002Fa>\n  \u003Ca href=\"README-zh.md\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F中文-red?style=flat-square\" alt=\"中文\">\u003C\u002Fa>\n\u003C\u002Fp>\n\n**Type one line in your agent. Get back a SwiftUI interface that doesn't look AI-generated.**\n\nIn 3 to 30 minutes, you can design a **signature iOS interface** — not \"AI-made-it-looks-okay\" quality, but something that looks like it was crafted by a designer with taste.\n\nAnti-AI Slop 6 Iron Rules, Design Direction Advisor, Brand Asset Protocol, 5-Dimension Review — all built in. Give the skill your brand palette and it will read your vibe; give nothing and the 5 built-in design languages will still hold their ground.\n\nWorks across agents — Claude Code, Cursor, Codex, OpenCode, Hermes, all supported.\n\n## Install & Go\n\n```bash\nnpx skills add wholiver\u002Fswiftui-design-skill -g -y\n```\n\n## What Can It Do\n\n| Capability | Deliverable | Typical Time |\n|------------|-------------|--------------|\n| SwiftUI Interface Design | Compilable SwiftUI code · Design system tokens · Layout patterns | 10–15 min |\n| Design Direction Advisor | 5 schools × N design philosophies · 3 recommended directions · Visual anchor descriptions | 5 min |\n| Brand Asset Integration | brand-spec.md · Color palette · Typography · Spacing system | 5–10 min |\n| Anti-AI Slop Review | Item-by-item check · Concrete fix code · Alternative approaches | 3–5 min |\n| 5-Dimension Review | Radar chart scoring · Keep\u002FFix\u002FQuick Wins · Actionable fix checklist | 3 min |\n| Layout Pattern Library | 9 common layouts · Copy-paste SwiftUI code | Instant |\n| Animation Design | Spring\u002Fparallax\u002Fpull-to-refresh · Compilable code | 5–10 min |\n\n## Core Mechanisms\n\n### Anti-AI Slop 6 Iron Rules\n\nThis is the hardest set of rules in the skill. All designs must pass these 6 checks:\n\n| # | Iron Rule | ❌ Forbidden | ✅ Alternative |\n|---|-----------|-------------|----------------|\n| 1 | Start from context | Inventing from a blank canvas | Ask about design system \u002F UI kit \u002F brand assets first |\n| 2 | Junior Designer Mode | Waiting for the perfect solution | Gray placeholder > bad SVG |\n| 3 | Give variants, not finals | One \"final answer\" | 2–3 differentiated directions |\n| 4 | Placeholder > bad implementation | AI-generated clip art | Clean gray placeholder + text label |\n| 5 | System-first, don't fill | Packing every pixel | Every element must justify its existence |\n| 6 | Ban AI slop patterns | Purple-blue gradients, emoji icons, rounded cards + left border | Single warm accent color, SF Symbols, serif headlines |\n\nSee `references\u002Fanti-ai-slop.md` for details.\n\n### Design Direction Advisor\n\nWhen requirements are vague, the skill recommends 3 differentiated directions from 5 major design schools:\n\n| School | Characteristics | Signature Style |\n|--------|-----------------|-----------------|\n| **Informational** | Data-first, chart-dense | Bloomberg Terminal |\n| **Editorial** | Magazine layout, serif type, generous whitespace | NYT, Medium |\n| **Expressive** | Bold color, asymmetric layout, motion-forward | Stripe, Linear |\n| **Functional** | Dense tool feel, monospace accents | Things, OmniFocus |\n| **Warm Minimal** | Soft neutrals, rounded corners, subtle texture | Notion, Craft |\n\n### Brand Asset Protocol\n\nA mandatory 5-step hard process when working with a specific brand:\n\n| Step | Action | Purpose |\n|------|--------|---------|\n| 1 · Ask | Does the user have brand guidelines? | Respect existing assets |\n| 2 · Search | Search the brand's official pages | Obtain real materials |\n| 3 · Download | Download actual asset files | PNG\u002FSVG logos, fonts |\n| 4 · Verify | Verify colors match official sources | Cross-check hex values |\n| 5 · Write | Generate brand-spec.md | Record complete design system |\n\nQuality threshold: 5 real brand colors, 10 design tokens, 2 font families, 8pt spacing grid.\n\n### 5-Dimension Review\n\nEvery design must pass a 5-dimension review before delivery:\n\n| Dimension | Scoring Criteria | Minimum Score |\n|-----------|------------------|---------------|\n| 🎯 Philosophy Consistency | Does the design embody the chosen design philosophy? | ≥ 7\u002F10 |\n| 📐 Visual Hierarchy | Is the information priority clear? | ≥ 7\u002F10 |\n| 🔧 Detail Execution | Are spacing, typography, and colors precise? | ≥ 7\u002F10 |\n| ⚡ Functionality | Does the layout serve user goals? | ≥ 7\u002F10 |\n| ✨ Originality | Is there at least 1 signature detail? | ≥ 7\u002F10 |\n\n## File Structure\n\n```\nswiftui-design-skill\u002F\n├── SKILL.md                           ← Core definition (278 lines)\n├── references\u002F\n│   ├── anti-ai-slop.md                ← Anti-AI Slop detailed rules (268 lines)\n│   ├── layout-patterns.md             ← 9 layout patterns + copy-paste code (265 lines)\n│   ├── typography-color.md            ← Typography hierarchy + color system (172 lines)\n│   ├── design-review.md               ← 5-Dimension Review process (151 lines)\n│   └── swift-extensions.md            ← Color\u002FFont\u002FAnimation extensions (373 lines, essential)\n└── templates\u002F\n    └── brand-spec.md                  ← Brand spec template (77 lines)\n```\n\n## Difference from swiftui-expert-skill\n\n| | SwiftUI Design Skill | swiftui-expert-skill |\n|---|---|---|\n| **Focus** | Visual design, aesthetics, brand feel | Code quality, performance, correctness |\n| **Question** | \"How does it look?\" | \"Is the code correct?\" |\n| **Output** | Design direction, color palette, layout, review | Code review, Instruments analysis, API modernization |\n| **Complementary** | Use Design first to set direction | Then use Expert to ensure code quality |\n\nThe two skills work together: Design decides **what to build**, Expert ensures **how to build it right**.\n\n## License\n\nMIT — use freely, but please keep the original author attribution.\n","SwiftUI Design Skill 是一个旨在通过简单的指令生成高质量 SwiftUI 界面的工具。其核心功能包括遵循六条铁律以避免AI生成的设计缺陷、提供设计方向咨询、品牌资产指南及五维审查机制，确保产出的设计既符合品牌规范又具有专业美感。该项目支持多种AI代理平台，如Claude Code、Cursor等，适用于需要快速创建iOS或macOS应用界面但又希望保持高水平设计质量的场景。无论是独立开发者还是团队协作，都能利用此技能在短时间内得到美观且实用的界面设计方案。",2,"2026-06-11 03:56:07","CREATED_QUERY"]