Communitygithub.com

nlook-service/design-from-code

実際のソースコードからUI変更をデザイン — データ検証、忠実なHTMLモックアップを繰り返し作成し、委譲します。nlook.meによるClaude Codeプラグイン&Codexスキル。

design-from-code とは?

このスキルは、実際のソースコードを基にUI変更を設計するためのClaude Codeプラグイン兼Codexスキルです。開発者はアプリケーションのデータフローを確認し、忠実なHTMLモックアップを反復的に作成し、最終的な実装作業を委譲できます。主なワークフローとして、ソースコードの解析、データ構造の検証、HTML/CSSモックアップの生成、そしてコード生成の委譲が含まれます。このスキルを使うことで、デザインと実装のギャップを減らし、実際のデータに基づいた正確なUI変更が可能になります。

対応✓Claude Code✓Codex CLI~Cursor
npx skills add nlook-service/design-from-code

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

design-from-code は何をしますか?

実際のソースコードからUI変更をデザイン — データ検証、忠実なHTMLモックアップを繰り返し作成し、委譲します。nlook.meによるClaude Codeプラグイン&Codexスキル。

概要

このスキルは、既存のコードベースを分析し、データ構造を理解した上で、UI変更のための正確なHTMLモックアップを生成するのに役立ちます。開発プロセスを効率化し、デザインの品質を向上させることを目的としています。

使用方法

  1. ソースコードの解析
  2. データ構造の検証
  3. モックアップの反復生成
  4. 実装の委譲

サポート環境

  • Claude Code
  • Codex(OpenAI)

注意事項

  • コード内の機密情報には注意してください
  • 生成されたモックアップは必ずレビューしてください

関連スキル