본문으로 건너뛰기
cccskills
무료GitHub에 공개

apply-design

デザインの差し替え。ロジックは一切触らず見た目(HTML/CSS/テンプレート)だけを更新する。「このデザインに差し替えて」「UIをFigmaの通りに変えて」「見た目だけ変えて」 「デザインを更新して」「CSSだけ直して」などのリクエストで使用する。

ロジック変更を伴う場合はrevise-specを使う。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

연동 도구Figma
설치 방법 보기

포함된 파일(1)

  • SKILL.md1.6 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

デザインの差し替え

手順

  1. 指定されたSpec IDまたは画面を特定
  2. デザインファイル(スクショ、Figmaリンク等)があれば分析
  3. デザイン指定がない場合:CLAUDE.mdの「デザイン方針」に従う
  4. 現在のコードのUI部分を特定
  5. HTML/CSS/テンプレート等の見た目部分のみ変更(ロジックは触らない)
  6. 変更内容を設計書に記録:
    • 該当する要件定義書にデザイン変更の内容を追記(「デザイン変更履歴」セクション。なければ作成)
    • デザインファイルを使った場合、docs/designs/ に保存して要件定義書からリンクする
  7. .claude/skills/_shared/finish-impl.md の共通仕上げ手順を実行
  8. 次のステップを提案(「他の画面のデザインも更新しますか?」)

ルール

  • ロジック(バリデーション、API呼び出し、データ処理等)は一切変更しない
  • テストが通らなくなった場合はデザイン変更を見直す
  • CLAUDE.mdにデザインルールがあればそれに従う

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

add-repo

무료

既存プロジェクトに新しいリポジトリを追加する。Workspaceにリポを追加した後、 CLAUDE.md・設計書・ドメイン構成を差分更新する。 「モバイルリポを追加した」「新しいリポを取り込んで」「リポを追加したので設計書を更新して」 「Workspaceにリポを足した」などのリクエストで使用する。 init-spec の移行モードではファイル存在チェックしか行わないため、 既存ドキュメントの内容を新リポに合わせて拡張するにはこのスキルを使う。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

i-standard1/yamasaki62026년 8월 26일 업데이트

既存プロジェクトをサブエージェントで並列分析し、 精度の高い overview.md を生成する。init-spec の前処理として使う。 「既存プロジェクトを分析して」「コードベースを理解して設計書を作って」 「overview.mdを作って」などのリクエストで使用する。 ファイル数が200を超えるプロジェクトで特に有効。 200以下の場合は単一エージェントで全体を読む方が精度が高いため、 init-spec をそのまま実行することを提案する。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

i-standard1/yamasaki62026년 8월 26일 업데이트

browse

무료

ブラウザで画面を確認する。agent-browser CLI を使って画面のスクリーンショット撮影、 アクセシビリティツリー取得、フォーム操作、画面遷移などを行う。 「画面見て」「ブラウザ確認して」「スクショ撮って」「現状把握して」「画面開いて」 「ログインして確認して」「画面の状態を教えて」「UIを確認して」などのリクエストで使用する。 E2Eテストの作成・実行には gen-tests(Playwright)を使うこと。本スキルはテスト実行ではなく 「AIの目」としてブラウザを操作し、画面状態を把握するためのもの。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

i-standard1/yamasaki62026년 8월 26일 업데이트

ClaudeDesign(claude.ai/design)とClaude Codeの連携。DesignSyncツールで デザインプロジェクトからプロトタイプHTML等を取得(インポート)、または ローカルのコンポーネントをデザインシステムプロジェクトへ同期(プッシュ)する。 「ClaudeDesignからデザインを取得して」「claude.ai/design のURLを取り込んで」 「デザインプロジェクトに同期して」「デザインシステムをプッシュして」 などのリクエスト、または claude.ai/design のURLが渡されたときに使用する。 取得したデザインのコード実装への適用は apply-design を使う。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

i-standard1/yamasaki62026년 8월 26일 업데이트

詳細設計書の一括生成。2つのモードを自動判定する: (A) コード分析モード: 既存コードから詳細設計書を逆生成する(init-spec + spec-all 完了後) (B) 設計書ファーストモード: 要件定義書から詳細設計書を新規作成する(コードなし) 「詳細設計を作って」「設計書を完成させて」「実装に必要な設計書を全部作って」 「他のエンジニアに渡せる設計書にして」などのリクエストで使用する。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

i-standard1/yamasaki62026년 8월 26일 업데이트

MkDocs プレビュー(:8000)と承認API(:8765)を同時起動する。「ドックを起動して」「docsプレビュー見たい」「設計書をブラウザで確認したい」「承認ボタン使いたい」等のリクエストで発火する。

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

i-standard1/yamasaki62026년 8월 26일 업데이트

i-standard1의 스킬 모두 보기

이 스킬의 문제 신고