AIとつくる、実践プログラミング・コーディングメディア

devs tools / 26 tools + 5 studios

作って、試して、そのまま実装できる。

CSS、コンポーネント、モーション、レイアウト、WordPress用コードを、見た目を確かめながら組み立てます。生成はブラウザ内で完結し、設定もコードも手元に保存できます。

Studioから始める 全ツールを見る
devs / project.css
.feature-card {
  background: linear-gradient(135deg,
    #6d5dfc 0%, #22c55e 100%);
  border-radius: clamp(18px, 4vw, 32px);
}

@media (prefers-reduced-motion: reduce) {
  .feature-card { animation: none; }
}

Integrated workspaces

組み合わせて作る、5つのStudio

単機能の生成だけでなく、複数の設定・状態・検査・出力を同じ画面で扱えます。

01 Visual Css

Visual CSS Studio

背景、グラデーション、枠線、影、フィルター、2D・3D変形、状態を1つの要素へ重ね、実案件向けのCSSを作る統合Studioです。

Studioを開く → 02 Components

Component Studio

ボタン、カード、見出し、バッジ、フォーム、表などを、HTML構造・状態・アクセシビリティまで含めて組み立てます。

Studioを開く → 03 Motion

Motion Studio

CSS transition・keyframes、Intersection Observer、Web Animations API、GSAP、ScrollTriggerを同じ設定から比較・生成します。

Studioを開く → 04 Layout

Responsive Layout Studio

Flexbox、Grid、Container Queries、clamp()を使ったレイアウトを、3つの画面幅で比較しながら作ります。

Studioを開く → 05 Wordpress

WordPress CSS Studio

追加CSS、ブロックの追加クラス、Block Style Variation、theme.jsonなど、WordPressへ安全に反映できる形式で出力します。

Studioを開く →

Focused generators

目的から選べる全ツール

作りたいもの、CSSプロパティ、技術名、困りごとから探せます。

表示

レイアウト

Section Composer：Webページの構成を設計・出力

ヒーロー（主見出し）、特徴、事例、料金、よくある質問、CTA（行動を促す導線）など13種類のセクションを並べ、文章・見出し・色や余白の設計値・品質を1つのプロジェクトで管理し、HTMLやWordPress向けの8形式へ変換します。

Semantic HTML · Gutenberg markup · Theme patterns · Pattern plugin · Starter page pattern · theme.json v3 · Project JSON · Runbook

Glossary

ツール内で使う言葉の意味

Studio
複数の関連ツール、状態、検査を1つにまとめた制作画面です。
Recipe
すべての設定値を持った編集可能な完成例です。単なる見本画像ではありません。
Scope
生成したCSSが関係のない要素へ影響しないように限定するセレクターの範囲です。
Fallback
機能に未対応のブラウザや設定でも内容を保つための代替表現です。