Frontend
Plugin
swiftui-design-skill
"One prompt. A shippable SwiftUI interface." Type one line in your agent. Get back a SwiftUI interface that doesn't look AI-generated.
Plugin Signal44/100Fair
maintained52
capable14
documented75
adopted47
Install
$ npx -y skills add Wholiver/swiftui-design-skill --agent claude-code
What's inside
README
SwiftUI Design Skill
"One prompt. A shippable SwiftUI interface."
Type one line in your agent. Get back a SwiftUI interface that doesn't look AI-generated.
In 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.
Anti-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.
Works across agents ā Claude Code, Cursor, Codex, OpenCode, Hermes, all supported.
Install & Go
npx skills add wholiver/swiftui-design-skill -g -y
What Can It Do
| Capability | Deliverable | Typical Time |
|---|---|---|
| SwiftUI Interface Design | Compilable SwiftUI code Ā· Design system tokens Ā· Layout patterns | 10ā15 min |
| Design Direction Advisor | 5 schools Ć N design philosophies Ā· 3 recommended directions Ā· Visual anchor descriptions | 5 min |
| Brand Asset Integration | brand-spec.md Ā· Color palette Ā· Typography Ā· Spacing system | 5ā10 min |
| Anti-AI Slop Review | Item-by-item check Ā· Concrete fix code Ā· Alternative approaches | 3ā5 min |
| 5-Dimension Review | Radar chart scoring Ā· Keep/Fix/Quick Wins Ā· Actionable fix checklist | 3 min |
| Layout Pattern Library | 9 common layouts Ā· Copy-paste SwiftUI code | Instant |
| Animation Design | Spring/parallax/pull-to-refresh Ā· Compilable code | 5ā10 min |
Core Mechanisms
Anti-AI Slop 6 Iron Rules
This is the hardest set of rules in the skill. All designs must pass these 6 checks:
| # | Iron Rule | ā Forbidden | ā Alternative |
|---|---|---|---|
| 1 | Start from context | Inventing from a blank canvas | Ask about design system / UI kit / brand assets first |
| 2 | Junior Designer Mode | Waiting for the perfect solution | Gray placeholder > bad SVG |
| 3 | Give variants, not finals | One "final answer" | 2ā3 differentiated directions |
| 4 | Placeholder > bad implementation | AI-generated clip art | Clean gray placeholder + text label |
| 5 | System-first, don't fill | Packing every pixel | Every element must justify its existence |
| 6 | Ban AI slop patterns | Purple-blue gradients, emoji icons, rounded cards + left border | Single warm accent color, SF Symbols, serif headlines |
See references/anti-ai-slop.md for details.
Design Direction Advisor
When requirements are vague, the skill recommends 3 differentiated directions from 5 major design schools:
| School | Characteristics | Signature Style |
|---|---|---|
| Informational | Data-first, chart-dense | Bloomberg Terminal |
| Editorial | Magazine layout, serif type, generous whitespace | NYT, Medium |
| Expressive | Bold color, asymmetric layout, motion-forward | Stripe, Linear |
| Functional | Dense tool feel, monospace accents | Things, OmniFocus |
| Warm Minimal | Soft neutrals, rounded corners, subtle texture | Notion, Craft |
Brand Asset Protocol
A mandatory 5-step hard process when working with a specific brand:
| Step | Action | Purpose |
|---|---|---|
| 1 Ā· Ask | Does the user have brand guidelines? | Respect existing assets |
| 2 Ā· Search | Search the brand's official pages | Obtain real materials |
| 3 Ā· Download | Download actual asset files | PNG/SVG logos, fonts |
| 4 Ā· Verify | Verify colors match official sources | Cross-check hex values |
| 5 Ā· Write | Generate brand-spec.md | Record complete design system |
Quality threshold: 5 real brand colors, 10 design tokens, 2 font families, 8pt spacing grid.
5-Dimension Review
Every design must pass a 5-dimension review before delivery:
| Dimension | Scoring Criteria | Minimum Score |
|---|---|---|
| šÆ Philosophy Consistency | Does the design embody the chosen design philosophy? | ā„ 7/10 |
| š Visual Hierarchy | Is the information priority clear? | ā„ 7/10 |
| š§ Detail Execution | Are spacing, typography, and colors precise? | ā„ 7/10 |
| ā” Functionality | Does the layout serve user goals? | ā„ 7/10 |
| āØ Originality | Is there at least 1 signature detail? | ā„ 7/10 |
File Structure
swiftui-design-skill/
āāā SKILL.md ā Core definition (278 lines)
āāā references/
ā āāā anti-ai-slop.md ā Anti-AI Slop detailed rules (268 lines)
ā āāā layout-patterns.md ā 9 layout patterns + copy-paste code (265 lines)
ā āāā typography-color.md ā Typography hierarchy + color system (172 lines)
ā āāā design-review.md ā 5-Dimension Review process (151 lines)
ā āāā swift-extensions.md ā Color/Font/Animation extensions (373 lines, essential)
āāā templates/
āāā brand-spec.md ā Brand spec template (77 lines)
Difference from swiftui-expert-skill
| SwiftUI Design Skill | swiftui-expert-skill | |
|---|---|---|
| Focus | Visual design, aesthetics, brand feel | Code quality, performance, correctness |
| Question | "How does it look?" | "Is the code correct?" |
| Output | Design direction, color palette, layout, review | Code review, Instruments analysis, API modernization |
| Complementary | Use Design first to set direction | Then use Expert to ensure code quality |
The two skills work together: Design decides what to build, Expert ensures how to build it right.
License
MIT ā use freely, but please keep the original author attribution.
File tree
Wholiver/swiftui-design-skillView on GitHub
.gitignore LICENSE metadata.json README-zh.md README.md references/ anti-ai-slop.md design-review.md layout-patterns.md swift-extensions.md typography-color.md RELEASE-v1.0.0.md SKILL.md templates/ brand-spec.md
FAQ
swiftui-design-skill is a Claude Code plugin with 1 hand-picked skill for frontend work, indexed on Flowy. Install it with the command on its page. It includes swiftui-design-skill. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is swiftui-design-skill?
- "One prompt. A shippable SwiftUI interface." Type one line in your agent. Get back a SwiftUI interface that doesn't look AI-generated.
- How do I install swiftui-design-skill?
- Run these in Claude Code: npx -y skills add Wholiver/swiftui-design-skill --agent claude-code. Then prompt normally.
- Does swiftui-design-skill auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is swiftui-design-skill free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.