screen-coder

Converts UI screenshots and design mockups into production-ready HTML/CSS code. Multi-agent architecture analyzes layout, plans structure, generates clean code. Use when you have a design image and need code. Don't use for code-to-code tasks.

インストールへ移動

リポジトリ: neuron-one/GODMODE
ソースの最終更新活動: 2026年4月1日 10:58
検出された SKILL.md の言語: 英語
スター: 27
フォーク: 11

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。

npx skills add https://github.com/neuron-one/GODMODE --skill screen-coder

コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。

ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。

ソースファイルを確認

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

SKILL.md

ソースの指示 · 読み取り専用プレビュー

検索に戻るインストールに戻る

ml-training

Machine learning model training with HuggingFace. Fine-tuning LLMs, dataset creation, GPU selection, training monitoring. Use for training custom models. Don't use for using pre-trained models via API.

2026-04-01

cost-estimate

Estimates project cost at market rates. Scans codebase, counts APIs, integrations, and complexity. Shows what the project would cost without AI. Use for pitches and ROI demonstrations.

2026-04-01

marketing

Marketing and conversion optimization. Landing page CRO, copywriting, positioning, GTM strategy, A/B testing. Don't use for product development or technical decisions.

2026-04-01

このリポジトリのすべてを見る

name	screen-coder
description	Converts UI screenshots and design mockups into production-ready HTML/CSS code. Multi-agent architecture analyzes layout, plans structure, generates clean code. Use when you have a design image and need code. Don't use for code-to-code tasks.
disable-model-invocation	true
model	opus
effort	high
allowed-tools	Read, Write, Bash, Glob
argument-hint	["path-to-screenshot"]

ScreenCoder — Screenshot to Code

Convert a UI design screenshot into production-ready code.

Process:

Analyze the screenshot layout and visual structure
Identify all UI components (buttons, cards, inputs, navigation)
Plan HTML structure and CSS approach
Generate clean, editable HTML + CSS/Tailwind code
Ensure responsive design

Input: $ARGUMENTS (path to screenshot image)

Output:

Clean HTML file
Tailwind CSS classes (preferred) or separate CSS
Component structure matching the design

Rules:

Match the design as closely as possible
Use semantic HTML elements
Mobile-first responsive approach
Use existing component patterns from the project if available

screen-coder

インストール方法

ソースファイルを確認

ScreenCoder — Screenshot to Code

Process:

Input: $ARGUMENTS (path to screenshot image)

Output:

Rules:

Reference: https://github.com/leigest519/ScreenCoder

ScreenCoder — Screenshot to Code

Process:

Input: $ARGUMENTS (path to screenshot image)

Output:

Rules:

Reference: https://github.com/leigest519/ScreenCoder

screen-coder

ソース情報

インストール方法

ソースファイルを確認

このリポジトリの他の Skills

このリポジトリの他の Skills

ScreenCoder — Screenshot to Code

Process:

Input: $ARGUMENTS (path to screenshot image)

Output:

Rules:

Reference: https://github.com/leigest519/ScreenCoder

ScreenCoder — Screenshot to Code

Process:

Input: $ARGUMENTS (path to screenshot image)

Output:

Rules:

Reference: https://github.com/leigest519/ScreenCoder