Stats
Actions
Tags
From jkit
Create distinctive, production-grade Flutter interfaces with high design quality. Use this skill when the user asks to build Flutter widgets, screens, or applications. Generates creative, polished Dart code that avoids generic AI aesthetics.
How this skill is triggered — by the user, by Claude, or both
Slash command
/jkit:flutter-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
이 스킬은 진부한 "AI 풍" 디자인을 피하고 디자인 완성도가 높은 프로덕션급 Flutter 인터페이스를 만들도록 안내한다. 미적 디테일과 창의적 선택에 세심하게 신경 쓰며 실제로 동작하는 Dart 코드를 작성한다.
이 스킬은 진부한 "AI 풍" 디자인을 피하고 디자인 완성도가 높은 프로덕션급 Flutter 인터페이스를 만들도록 안내한다. 미적 디테일과 창의적 선택에 세심하게 신경 쓰며 실제로 동작하는 Dart 코드를 작성한다.
사용자는 Flutter UI 요구사항(위젯·화면·앱·인터페이스)을 제시한다. 목적·대상 사용자·기술 제약 같은 컨텍스트가 함께 주어질 수 있다.
| Argument | Description |
|---|---|
--plan | 디자인 컨셉을 출력한 뒤 Plan 에이전트를 호출해 상세 구현 계획을 만든다. 플래그가 없으면 디자인 컨셉만 출력. |
사용 예:
/flutter-design → 디자인 컨셉만 (기본값)/flutter-design --plan → 디자인 컨셉 + Plan 에이전트이 프로젝트는 flutter_leaf_component를 UI 컴포넌트 라이브러리로 사용한다. 항상 기존 디자인 시스템을 활용하라.
BuildContext 확장으로 토큰에 접근:
context.leafColors → LeafColors (시맨틱 컬러 토큰: primary, secondary, surface, error, success, warning, info)context.leafTypography → LeafTypography (Material Design 3 기반, 15개 TextStyle: display/headline/title/body/label)context.leafSpacing → LeafSpacing (xs:2, sm:4, md:8, lg:12, xl:16, xxl:24, xxxl:32)context.leafElevation → LeafElevation (none/xs/sm/md/lg/xl, 박스 섀도우 프리셋)context.leafRadius → LeafRadius (none:0, sm:4, md:8, lg:12, xl:16, xxl:20, full:50)context.leafDuration → LeafDuration (fast:150ms, normal:250ms, slow:300ms, verySlow:450ms)위젯 파라미터 > 컴포넌트 테마 > 글로벌 토큰
LeafThemeData.light() 또는 LeafThemeData.dark()를 베이스로 두고 copyWith() + 컴포넌트별 ThemeData 클래스(예: LeafButtonThemeData, LeafAppBarThemeData)로 커스터마이즈한다.
코딩하기 전에 컨텍스트를 이해하고 대담한 미적 방향을 정한다:
중요: 분명한 컨셉 방향을 잡고 정밀하게 실행하라. 대담한 맥시멀리즘과 정제된 미니멀리즘 둘 다 통한다. 핵심은 강도가 아니라 의도성이다.
이어서 다음을 만족하는 Flutter/Dart 코드를 작성한다:
집중할 영역:
google_fonts 패키지로 캐릭터 있는 폰트를 선택. Roboto나 시스템 폰트 기본값으로 후퇴하지 말 것. 임팩트 있는 디스플레이 폰트와 정제된 본문 폰트를 페어링. 디자인이 요구하면 LeafThemeData.copyWith()로 LeafTypography를 오버라이드해 고유 타입 처리.LeafThemeData로 LeafColors를 커스터마이즈해 앱 전반의 일관성 확보. 강한 도미넌트 컬러 + 날카로운 액센트가 미지근한 균등 팔레트보다 효과적. 디자인 비전을 살리는 ColorScheme.fromSeed() 또는 직접 다듬은 팔레트를 사용.LeafAnimated atom (bounce, expand, fade, flip, rotate, scale)과 LeafDuration 토큰으로 일관된 타이밍. 복잡한 애니메이션은 AnimationController + CurvedAnimation 사용. 화면 전환에는 Hero. 임팩트 있는 한 순간(스태거드 리빌이 잘 짜인 화면 진입 등)이 흩어진 마이크로 인터랙션 여러 개보다 더 큰 인상을 만든다.Stack/CustomMultiChildLayout/Transform/SliverAppBar로 예측 못 한 레이아웃. 비대칭. Positioned로 오버랩. Transform.rotate로 사선 흐름. LeafSpacing 토큰으로 일관된 리듬. 넉넉한 여백 또는 통제된 밀도.BoxDecoration 그라디언트, CustomPainter로 기하 패턴/텍스처, ShaderMask로 그라디언트 텍스트/마스크, BackdropFilter로 블러/글래스, LeafElevation 섀도우로 레이어 깊이, ClipPath로 창의적 형태.다음과 같은 진부한 AI풍은 절대 사용 금지: 손대지 않은 Material 기본 테마, 기본 AppBar 스타일이 그대로인 Scaffold, 시각 정제 없는 ListView, 남발된 컬러 스킴(특히 흰 배경 위 보라 그라디언트), 예측 가능한 레이아웃·위젯 패턴, 컨텍스트 특수성이 없는 쿠키 커터 디자인.
창의적으로 해석하고 컨텍스트에 맞춰 의도된 느낌의 예상 밖 선택을 하라. 어떤 디자인도 같으면 안 된다. 라이트/다크, 다른 폰트, 다른 미학을 다양화하라. 세대 간에 흔한 선택으로 수렴하지 마라.
중요: 구현 복잡도를 미적 비전에 맞춰라. 맥시멀리즘 디자인은 광범위한 애니메이션/이펙트를 갖춘 정교한 코드가 필요하고, 미니멀하고 정제된 디자인은 절제·정밀함·간격/타이포/디테일에 대한 세심한 주의가 필요하다. 우아함은 비전을 잘 실행하는 데서 나온다.
기억하라: Claude는 비범한 창의 작업을 할 수 있다. 자제하지 말고 박스 밖에서 사고하며 명확한 비전에 온전히 commit할 때 만들 수 있는 결과를 보여줘라.
참고: 이 섹션은
--plan인자가 제공된 경우에만 적용된다.--plan이 없으면 이 섹션 전체를 건너뛰고 디자인 컨셉만 출력 후 종료한다. Plan 에이전트를 호출하지 않는다.
--plan이 제공되면 위에서 디자인 컨셉 출력을 마친 뒤 Plan 에이전트를 호출해 상세 구현 계획을 만든다.
--plan 사용 시에만)Agent 툴에 subagent_type: "Plan"을 지정하고 디자인 출력 전체를 prompt로 전달한다 (Claude Code 내장 에이전트 — 외부 플러그인 불필요). prompt에 포함할 내용:
Task prompt 예시 구조:
다음 Flutter 디자인 컨셉을 기반으로 상세 구현 계획을 만들어줘:
[디자인 컨셉 출력 전체]
프로젝트는 flutter_leaf_component 사용 (Atomic Design: Atoms, Molecules, Organisms, Templates).
디자인 토큰은 context.leafColors, context.leafTypography, context.leafSpacing 등으로 접근.
다음을 포함하는 단계별 구현 계획을 만들어줘:
- 파일 구조와 컴포넌트 계층
- 구현 순서 (의존성 순)
- 컴포넌트별 사용할 위젯·디자인 토큰
- 애니메이션·인터랙션 디테일
- 위험 영역과 기술적 고려사항
Plan 에이전트가 만들 결과물:
Provides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub josephnk/jkit-code-plugin --plugin jkit