Run any Skill in Manus with one click

apply-design

Stars6

Forks2

UpdatedApril 5, 2026 at 18:44

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

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

i-standard1

i-standard1/yamasaki

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	apply-design
description	デザインの差し替え。ロジックは一切触らず見た目（HTML/CSS/テンプレート）だけを更新する。「このデザインに差し替えて」「UIをFigmaの通りに変えて」「見た目だけ変えて」「デザインを更新して」「CSSだけ直して」などのリクエストで使用する。ロジック変更を伴う場合はrevise-specを使う。
context	{"required":["_shared/finish-impl.md"]}

デザインの差し替え

手順

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

ルール

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

More from this repository

same repository

claude-design

i-standard1/yamasaki

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

2026-07-046

detail-design

i-standard1/yamasaki

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

2026-06-246

init-spec

i-standard1/yamasaki

既存プロジェクトの初期セットアップ（初回のみ）。コードリポジトリを分析してCLAUDE.md、要件概要、基本設計書（アーキテクチャ、DB設計、API設計）、OpenAPI仕様、MkDocs設定を自動生成する。「このプロジェクトをセットアップして」「既存コードを分析して」「設計書を初期化して」「プロジェクトの構造を把握して」などのリクエストで使用する。既にドキュメントがある場合は移行モードで差分だけ補完する。 ※ 既存Specの全更新・再生成には spec-all を使う。

2026-06-246

spec-all

i-standard1/yamasaki

全機能の一括Spec化・一括更新。PM として並列サブエージェントにコード分析を委任し、結果を統合して全機能の要件定義書を一括生成・更新する。「全部のSpecを作って」「設計書を全部作って」「全機能をドキュメント化して」「要件定義を全て更新して」「Specを全部更新して」などのリクエストで使用する。個別のSpec化には spec-feature を使う。init-specは初期セットアップ専用。

2026-06-246

spec-feature

i-standard1/yamasaki

既存機能のSpec化。実装済みコードを分析して要件定義書を逆生成する。 spec-map.yml にコードとSpecの対応関係を記録する（コード変更なし）。「ツイート機能のSpecを作って」「認証周りをドキュメント化して」「既存の○○機能を設計書にして」「この機能の要件を整理して」「○○の仕様を分析して」などのリクエストで使用する。既に動いているコードからドキュメントを起こすときに使う。新規機能にはdraft-specを使う。コード変更後のドキュメント追従にはupdate-docsを使う。

2026-06-246

update-docs

i-standard1/yamasaki

コード変更からドキュメントを追従更新する。設計書ファースト原則の例外措置。やむを得ず先にコードを変更した場合にのみ使用する。「さっきの変更をドキュメントに反映して」「設計書を最新にして」「コードと設計書がズレてるから直して」「ドキュメントを最新化して」「ドキュメント更新して」「設計書を現状に合わせて」などのリクエストで使用する。通常はドキュメントを先に更新してからコードを修正すること（revise-specを使う）。

2026-06-246

name	apply-design
description	デザインの差し替え。ロジックは一切触らず見た目（HTML/CSS/テンプレート）だけを更新する。「このデザインに差し替えて」「UIをFigmaの通りに変えて」「見た目だけ変えて」「デザインを更新して」「CSSだけ直して」などのリクエストで使用する。ロジック変更を伴う場合はrevise-specを使う。
context	{"required":["_shared/finish-impl.md"]}

デザインの差し替え

手順

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

ルール

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