一键在 Manus 中运行任何 Skill

design-system

星标45

分支11

更新时间2026年5月25日 08:54

앱 디자인 시스템을 설계하고 NativeWind/Tailwind 코드로 구현하는 스킬. 컬러 팔레트, 타이포그래피, 컴포넌트 variant, 화면 레이아웃을 정의하고 tailwind.config.js와 theme.ts를 실제로 업데이트한다. '디자인 해줘', '디자인 시스템 만들어줘', '색상 팔레트', 'UI 설계', '화면 디자인' 요청 시 반드시 이 스킬을 사용할 것.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

seungmanchoi

seungmanchoi/react-native-fsd-agent-template

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Design System — 앱 디자인 시스템 스킬

앱 컨셉에 맞는 디자인 시스템을 설계하고 NativeWind 코드로 구현하는 스킬.

Trigger

"디자인 해줘", "디자인 시스템 만들어줘"
"색상 팔레트", "테마 설정", "UI 설계"
"화면 디자인", "컴포넌트 디자인"

Input

PRD (_workspace/02_product_plan.md)
경쟁 앱 디자인 레퍼런스 (있으면)

Steps

Step 0: NativeWind 설정 검증 (GATE — 통과해야 다음 스텝 진행)

디자인 시스템을 정의하기 전에 NativeWind가 올바르게 설정되었는지 검증한다. 이 설정이 누락되면 className이 전혀 작동하지 않아 모든 디자인 작업이 무의미하다.

검증 항목 (모두 PASS 필수):
1. babel.config.js
   - presets에 ['babel-preset-expo', { jsxImportSource: 'nativewind' }] 존재 여부
   - presets에 'nativewind/babel' 존재 여부
2. metro.config.js
   - withNativeWind(config, { input: './global.css' }) 래핑 여부
3. tailwind.config.js
   - presets: [require('nativewind/preset')] 존재 여부
   - content에 app/, src/ 경로 포함 여부
4. global.css
   - @tailwind base; @tailwind components; @tailwind utilities; 존재 여부
5. 루트 _layout.tsx
   - import '../global.css'; 존재 여부
6. nativewind-env.d.ts
   - /// <reference types="nativewind/types" /> 존재 여부

FAIL 시: 누락된 설정을 즉시 수정하고 다음 스텝으로 진행
수정 후: Metro 캐시 클리어 필요 (npx expo start -c)

Step 1: 브랜드 톤 결정

앱 성격에 맞는 시각적 방향성 3가지 옵션 제시
- 예: "미니멀 & 클린" / "따뜻한 & 친근" / "대담한 & 에너제틱"
사용자 선택 후 진행

Step 2: 컬러 시스템

Primary, Secondary, Accent 컬러 정의
Semantic 컬러 (success, warning, error, info)
Background, Surface, Text 계층
Light/Dark 모드 대응
tailwind.config.js의 colors 섹션에 반영

Step 3: 타이포그래피

Heading 1~3, Body, Caption, Label 스케일
Font weight 체계 (regular, medium, semibold, bold)
Line height, Letter spacing
tailwind.config.js의 fontSize 섹션에 반영

Step 4: 컴포넌트 라이브러리

src/shared/ui/의 기존 컴포넌트 확인
각 컴포넌트의 variant, size, state 정의
NativeWind className 기반 스타일 명세
필요 시 새 컴포넌트 생성

Step 5: 화면별 레이아웃

PRD의 화면 구조를 기반으로 상세 레이아웃 정의
각 화면의 구조: SafeAreaView → 내부 컴포넌트 트리
NativeWind className으로 레이아웃 표현
핵심 화면 2~3개의 상세 레이아웃 제공

Step 6: 파일 업데이트

tailwind.config.js 업데이트
src/shared/config/theme.ts 업데이트
_workspace/03_design_system.md에 전체 디자인 시스템 문서 저장

Agent Delegation

Step	Agent
1-6	design-architect

同仓库更多 Skills

同仓库

sim-use

seungmanchoi/react-native-fsd-agent-template

Drive iOS Simulator and Android emulator/device screens for AI agents. Use when asked to automate a simulator or emulator, tap/swipe/type on a device, describe UI, take a screenshot, or interact with a mobile app.

2026-07-0445

inspect-app

seungmanchoi/react-native-fsd-agent-template

구현된 앱의 기능, UX, 디자인을 종합 검수하는 스킬. PRD 대비 기능 완성도, 화면 흐름, 디자인 가이드라인 준수, 접근성, 엣지 케이스를 점검한다. '앱 검수', '기능 점검', 'UX 검토', '디자인 QA', '출시 전 점검' 요청 시 반드시 이 스킬을 사용할 것.

2026-07-0445

orchestrate

seungmanchoi/react-native-fsd-agent-template

React Native + Expo + FSD 앱의 전체 라이프사이클(아이디어→기획→스펙→디자인→구현→QA→배포)을 10개 에이전트·9개 스킬로 오케스트레이션하는 일회성 빌드 파이프라인. '앱 만들어줘', '풀스택으로 만들어줘', '프로덕션 앱 만들어줘', 'end-to-end 개발', '처음부터 끝까지 만들어줘' 요청 시 반드시 이 스킬을 사용할 것. (출시 후 반복 개선은 /iterate-app)

2026-06-2245

iterate-app

seungmanchoi/react-native-fsd-agent-template

출시/1차 구현 완료 후 앱을 지속적으로 고도화하는 루프 스킬. 현황 진단 → 다음 고도화 추천(데이터 기반 랭킹) → 한 슬라이스 개발 → 검증 → 다음 추천을 반복한다. 전체 파이프라인을 재실행하지 않는다. '다음 뭐 만들지', '고도화해줘', '개선 루프', '기능 추가 우선순위', 'iterate', '다음 스프린트 돌려줘' 요청 시 반드시 이 스킬을 사용할 것.

2026-06-2145

create-entity

seungmanchoi/react-native-fsd-agent-template

FSD entity(도메인 모델) 레이어에 새 엔티티(api/store/types/index)를 생성하는 스킬. '엔티티 만들어줘', 'entity 추가', '도메인 모델 추가' 요청 시 반드시 이 스킬을 사용할 것.

2026-06-2145

create-feature

seungmanchoi/react-native-fsd-agent-template

FSD 아키텍처 규칙에 따라 새 feature 모듈(api/hooks/store/types/ui/index)을 스캐폴딩하는 스킬. barrel export·타입 프리픽스·레이어 의존성을 강제한다. '피처 만들어줘', 'feature 추가해줘', '새 기능 만들어줘' 요청 시 반드시 이 스킬을 사용할 것.

2026-06-2145

name

design-system

description

Design System — 앱 디자인 시스템 스킬

앱 컨셉에 맞는 디자인 시스템을 설계하고 NativeWind 코드로 구현하는 스킬.

Trigger

"디자인 해줘", "디자인 시스템 만들어줘"
"색상 팔레트", "테마 설정", "UI 설계"
"화면 디자인", "컴포넌트 디자인"

Input

PRD (_workspace/02_product_plan.md)
경쟁 앱 디자인 레퍼런스 (있으면)

Steps

Step 0: NativeWind 설정 검증 (GATE — 통과해야 다음 스텝 진행)

검증 항목 (모두 PASS 필수):
1. babel.config.js
   - presets에 ['babel-preset-expo', { jsxImportSource: 'nativewind' }] 존재 여부
   - presets에 'nativewind/babel' 존재 여부
2. metro.config.js
   - withNativeWind(config, { input: './global.css' }) 래핑 여부
3. tailwind.config.js
   - presets: [require('nativewind/preset')] 존재 여부
   - content에 app/, src/ 경로 포함 여부
4. global.css
   - @tailwind base; @tailwind components; @tailwind utilities; 존재 여부
5. 루트 _layout.tsx
   - import '../global.css'; 존재 여부
6. nativewind-env.d.ts
   - /// <reference types="nativewind/types" /> 존재 여부

FAIL 시: 누락된 설정을 즉시 수정하고 다음 스텝으로 진행
수정 후: Metro 캐시 클리어 필요 (npx expo start -c)

Step 1: 브랜드 톤 결정

앱 성격에 맞는 시각적 방향성 3가지 옵션 제시
- 예: "미니멀 & 클린" / "따뜻한 & 친근" / "대담한 & 에너제틱"
사용자 선택 후 진행

Step 2: 컬러 시스템

Primary, Secondary, Accent 컬러 정의
Semantic 컬러 (success, warning, error, info)
Background, Surface, Text 계층
Light/Dark 모드 대응
tailwind.config.js의 colors 섹션에 반영

Step 3: 타이포그래피

Heading 1~3, Body, Caption, Label 스케일
Font weight 체계 (regular, medium, semibold, bold)
Line height, Letter spacing
tailwind.config.js의 fontSize 섹션에 반영

Step 4: 컴포넌트 라이브러리

src/shared/ui/의 기존 컴포넌트 확인
각 컴포넌트의 variant, size, state 정의
NativeWind className 기반 스타일 명세
필요 시 새 컴포넌트 생성

Step 5: 화면별 레이아웃

PRD의 화면 구조를 기반으로 상세 레이아웃 정의
각 화면의 구조: SafeAreaView → 내부 컴포넌트 트리
NativeWind className으로 레이아웃 표현
핵심 화면 2~3개의 상세 레이아웃 제공

Step 6: 파일 업데이트

tailwind.config.js 업데이트
src/shared/config/theme.ts 업데이트
_workspace/03_design_system.md에 전체 디자인 시스템 문서 저장

Agent Delegation

Step	Agent
1-6	design-architect