Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

swiftui-design — Claude Code skill: SwiftUI design without slop

A skill that guides SwiftUI interface design by clear rules, avoiding typical AI-code mistakes. Directs design decisions, validates brand assets, and reviews layouts across five dimensions.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill swiftui-design -a claude-code
Open on GitHub

What swiftui-design does

swiftui-design is a set of rules and workflows for crafting quality iOS interfaces inside Claude Code, Cursor, Codex, and other agents. The skill includes anti AI-slop rules (bans on template solutions), design direction advice, a brand-asset protocol, and five-dimension layout review—feel, structure, typography, color, and interaction.

The skill triggers on phrases like "swiftui design", "ios design", "native ui design" and helps the agent choose the right approach during planning. It acts as a guide: explaining what to do and what to avoid, drawing on @wholiver's experience. Installation takes one command per platform; after that, invoke the skill by name or trigger phrase.

What it helps with

  • design SwiftUI interfaces without typical AI mistakes
  • align design with brand guidelines and assets
  • review a layout across structure, typography and interaction
  • avoid template, sloppy UI solutions

Example prompts for the agent

  • swiftui design for a profile screen with custom animations
  • ios design review: check this layout against five criteria
  • native ui design: how to lay out forms and buttons correctly in SwiftUI

How to install swiftui-design

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill swiftui-design -a claude-code

2Manually: put the files in place

~/.claude/skills/swiftui-design/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/swiftui-design/

From the same set39

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs d3-visualization nexu-io This skill teaches the agent to create interactive D3.js visualizations. Use it to generate charts for dashboards, reports, and data-rich prototypes. Claude Code CX Codex Cursor +1 3,100installs

Similar

popular-web-designs Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md) 54 real-world design systems (Stripe, Linear, Vercel, Claude) with CSS tokens, typography, and components for building pages styled after known brands. Claude Code CX Codex Cursor +1 914installs event-store-design Seth Hobson This skill guides event store design for event-sourced systems and helps compare storage technologies. Use it when building event persistence infrastructure or choosing a store. Claude Code CX Codex Cursor 10,800installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. Claude Code 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. Claude Code 850,344installs

Questions about swiftui-design

How do I install swiftui-design in Claude Code?

Run npx skills add nexu-io/open-design --skill swiftui-design -a claude-code, then check ~/.claude/skills/swiftui-design/SKILL.md. After that, invoke the skill by name or trigger phrases like "swiftui design" or "ios design".

What does swiftui-design do?

The skill guides iOS interface design, catches typical AI-code mistakes, and reviews layouts across five criteria: feel, structure, typography, color, interaction. It includes anti-slop rules and a protocol for working with brand assets.

Which platforms does swiftui-design work with?

The skill is available for Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode. Each platform has its own install command.

Source text

SKILL.md · Apache-2.0 
---
name: swiftui-design
description: |
  SwiftUI 前端设计 skill — anti AI-slop rules, design direction advisor, brand asset protocol, and five-dimension review. Works with Claude Code, Cursor, Codex, and OpenCode.
triggers:
  - "swiftui design"
  - "ios design"
  - "native ui design"
  - "apple frontend"
  - "swiftui slop"
od:
  mode: design-system
  category: design-systems
  upstream: "https://github.com/wholiver/swiftui-design-skill"
---

# swiftui-design

> Curated from @wholiver.

## What it does

SwiftUI 前端设计 skill — anti AI-slop rules, design direction advisor, brand asset protocol, and five-dimension review. Works with Claude Code, Cursor, Codex, and OpenCode.

## Source

- Upstream: https://github.com/wholiver/swiftui-design-skill
- Category: `design-systems`

## How to use

This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and references, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/wholiver/swiftui-design-skill
```

Then ask the agent to invoke this skill by name (`swiftui-design`) or with
one of the trigger phrases listed in this skill's frontmatter.

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor