https://b.hatena.ne.jp/efcl/Design/ Designに関するefclのはてなブックマーク (390) https://github.com/facebook/astryx ReactとStyleXで実装されたMetaのデザインシステム。 `@astryxdesign/core`でコンポーネントとテーマを提供し、`@astryxdesign/cli`でテンプレート/scaffolding/テーマ/codemodなどを扱える。 efcl 2026-06-25T00:23:32Z React Design Tools library <blockquote cite="https://github.com/facebook/astryx" title="GitHub - facebook/astryx: An open source design system that&#39;s fully customizable and agent ready"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgithub.com%2Ffacebook%2Fastryx" alt="" /> <a href="https://github.com/facebook/astryx">GitHub - facebook/astryx: An open source design system that&#39;s fully customizable and agent ready</a></cite><p><a href="https://github.com/facebook/astryx"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/cde80a4b7775b44c1aaf4bbf72f831bbef2443ac/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fopengraph.githubassets.com%2F8b983ce552fa524272e90ecb323d6a1b6ac8f6fed37325a9f9a288e0e1f41825%2Ffacebook%2Fastryx" alt="GitHub - facebook/astryx: An open source design system that&#39;s fully customizable and agent ready" title="GitHub - facebook/astryx: An open source design system that&#39;s fully customizable and agent ready" class="entry-image" /></a></p><p>Astryx is an open source design system that grew inside Meta over the last eight years, where it became the most-used and largest design system in the company — powering 13,000+ apps and shaped by the engineers, designers, and product teams who depend on it every day. It ships 150+ accessible com...</p><p><a href="https://b.hatena.ne.jp/entry/s/github.com/facebook/astryx"><img src="https://b.hatena.ne.jp/entry/image/https://github.com/facebook/astryx" alt="はてなブックマーク - GitHub - facebook/astryx: An open source design system that&#39;s fully customizable and agent ready" title="はてなブックマーク - GitHub - facebook/astryx: An open source design system that&#39;s fully customizable and agent ready" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/github.com/facebook/astryx"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 19 https://www.shoeisha.co.jp/book/detail/9784798195452 デザインの各要素(色/フォント/画像/線)が持つ視覚的な重さに着目し、面積/距離/明度差/余白/情報量/アンカーの観点からバランスを分析して改善する方法を解説している。 efcl 2026-05-16T06:46:57Z Design book <blockquote cite="https://www.shoeisha.co.jp/book/detail/9784798195452" title="デザインは重心。サクッと学べる重さとバランスの心理法則 | 翔泳社"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.shoeisha.co.jp%2Fbook%2Fdetail%2F9784798195452" alt="" /> <a href="https://www.shoeisha.co.jp/book/detail/9784798195452">デザインは重心。サクッと学べる重さとバランスの心理法則 | 翔泳社</a></cite><p><a href="https://www.shoeisha.co.jp/book/detail/9784798195452"><img src="" alt="デザインは重心。サクッと学べる重さとバランスの心理法則 | 翔泳社" title="デザインは重心。サクッと学べる重さとバランスの心理法則 | 翔泳社" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/www.shoeisha.co.jp/book/detail/9784798195452"><img src="https://b.hatena.ne.jp/entry/image/https://www.shoeisha.co.jp/book/detail/9784798195452" alt="はてなブックマーク - デザインは重心。サクッと学べる重さとバランスの心理法則 | 翔泳社" title="はてなブックマーク - デザインは重心。サクッと学べる重さとバランスの心理法則 | 翔泳社" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.shoeisha.co.jp/book/detail/9784798195452"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1 https://rosenfeldmedia.com/books/designing-assistant-technology/ Designing Agentive Technology/弱いAIのデザイン : ツールからエージェントへの著者の新しい書籍。 AIを使った支援技術(Assistant Technology)の設計について書かれた書籍。 AssistantとAgentの違い、ユーザーのスキルを低下させない支援のデ efcl 2026-05-10T14:58:02Z AI Design book <blockquote cite="https://rosenfeldmedia.com/books/designing-assistant-technology/" title="https://rosenfeldmedia.com/books/designing-assistant-technology/"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Frosenfeldmedia.com%2Fbooks%2Fdesigning-assistant-technology%2F" alt="" /> <a href="https://rosenfeldmedia.com/books/designing-assistant-technology/">https://rosenfeldmedia.com/books/designing-assistant-technology/</a></cite><p><a href="https://rosenfeldmedia.com/books/designing-assistant-technology/"><img src="" alt="https://rosenfeldmedia.com/books/designing-assistant-technology/" title="https://rosenfeldmedia.com/books/designing-assistant-technology/" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/rosenfeldmedia.com/books/designing-assistant-technology/"><img src="https://b.hatena.ne.jp/entry/image/https://rosenfeldmedia.com/books/designing-assistant-technology/" alt="はてなブックマーク - https://rosenfeldmedia.com/books/designing-assistant-technology/" title="はてなブックマーク - https://rosenfeldmedia.com/books/designing-assistant-technology/" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/rosenfeldmedia.com/books/designing-assistant-technology/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1 https://rosenfeldmedia.com/books/ デザインについて扱ってる出版社 efcl 2026-05-10T14:54:12Z Design book <blockquote cite="https://rosenfeldmedia.com/books/" title="Books | Rosenfeld Media"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Frosenfeldmedia.com%2Fbooks%2F" alt="" /> <a href="https://rosenfeldmedia.com/books/">Books | Rosenfeld Media</a></cite><p><a href="https://rosenfeldmedia.com/books/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/16ec04c7efb288b77bb2262cffd68216cccaa789/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Frm-media.nyc3.digitaloceanspaces.com%2Fwp-content%2Fuploads%2F2023%2F07%2Fbooks-home-page.png" alt="Books | Rosenfeld Media" title="Books | Rosenfeld Media" class="entry-image" /></a></p><p>Paperback + Free Ebooks i Our paperbacks come with a free DRM-free ebook in two common formats: ePub (for Kindle and iPad) and DAISY.</p><p><a href="https://b.hatena.ne.jp/entry/s/rosenfeldmedia.com/books/"><img src="https://b.hatena.ne.jp/entry/image/https://rosenfeldmedia.com/books/" alt="はてなブックマーク - Books | Rosenfeld Media" title="はてなブックマーク - Books | Rosenfeld Media" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/rosenfeldmedia.com/books/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 4 https://www.anthropic.com/news/claude-design-anthropic-labs Anthropic Labsが公開したデザインツール。 テキストプロンプト、画像、ドキュメント（DOCX/PPTX/XLSX）、コードベース、WebキャプチャなどからWebサイトデザインやプロトタイプ、スライド資料を作成できる。 チームのコードベー efcl 2026-04-18T13:20:21Z AI Design Tools <blockquote cite="https://www.anthropic.com/news/claude-design-anthropic-labs" title="Introducing Claude Design by Anthropic Labs"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.anthropic.com%2Fnews%2Fclaude-design-anthropic-labs" alt="" /> <a href="https://www.anthropic.com/news/claude-design-anthropic-labs">Introducing Claude Design by Anthropic Labs</a></cite><p><a href="https://www.anthropic.com/news/claude-design-anthropic-labs"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/bcff2bae202a58602cd6a6a95460f5da4627834f/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwww.anthropic.com%2Fapi%2Fopengraph-illustration%3Fname%3DHand%2520Quill%26backgroundColor%3Dcactus" alt="Introducing Claude Design by Anthropic Labs" title="Introducing Claude Design by Anthropic Labs" class="entry-image" /></a></p><p>Today, we’re launching Claude Design, a new Anthropic Labs product that lets you collaborate with Claude to create polished visual work like designs, prototypes, slides, one-pagers, and more. Claude Design is powered by our most capable vision model, Claude Opus 4.7, and is available in research ...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.anthropic.com/news/claude-design-anthropic-labs"><img src="https://b.hatena.ne.jp/entry/image/https://www.anthropic.com/news/claude-design-anthropic-labs" alt="はてなブックマーク - Introducing Claude Design by Anthropic Labs" title="はてなブックマーク - Introducing Claude Design by Anthropic Labs" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.anthropic.com/news/claude-design-anthropic-labs"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 140 https://stitch.withgoogle.com/docs/design-md/overview Google Stitchが導入したMarkdownベースのデザインシステム記述フォーマット。 DESIGN.mdファイルにカラー、タイポグラフィ、スペーシング、コンポーネントパターンなどのデザインルールをMarkdownで記述し、AIエージェントが利用 efcl 2026-04-10T15:03:02Z google Design AI Markdown <blockquote cite="https://stitch.withgoogle.com/docs/design-md/overview" title="Stitch - Design with AI"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fstitch.withgoogle.com%2Fdocs%2Fdesign-md%2Foverview" alt="" /> <a href="https://stitch.withgoogle.com/docs/design-md/overview">Stitch - Design with AI</a></cite><p><a href="https://stitch.withgoogle.com/docs/design-md/overview"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b0533a4fa68a64b6320c4cf76336b3887e9fe1f4/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fapp-companion-430619.appspot.com%2Fstatic%2Fog.png" alt="Stitch - Design with AI" title="Stitch - Design with AI" class="entry-image" /></a></p><p>Stitch generates UIs for mobile and web applications, making design ideation fast and easy.</p><p><a href="https://b.hatena.ne.jp/entry/s/stitch.withgoogle.com/docs/design-md/overview"><img src="https://b.hatena.ne.jp/entry/image/https://stitch.withgoogle.com/docs/design-md/overview" alt="はてなブックマーク - Stitch - Design with AI" title="はてなブックマーク - Stitch - Design with AI" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/stitch.withgoogle.com/docs/design-md/overview"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 23 https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/ デザインシステム/トーンをMarkdownで定義するDESIGN.md形式について。 efcl 2026-04-10T15:00:38Z google AI Design UI MCP Tools <blockquote cite="https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/" title="Introducing “vibe design” with Stitch"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.google%2Finnovation-and-ai%2Fmodels-and-research%2Fgoogle-labs%2Fstitch-ai-ui-design%2F" alt="" /> <a href="https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/">Introducing “vibe design” with Stitch</a></cite><p><a href="https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/cac0674e3b65664b9180045dd64ab0562eb03531/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fstorage.googleapis.com%2Fgweb-uniblog-publish-prod%2Fimages%2FStitch_Keyword_Hero_Visual.width-1300.png" alt="Introducing “vibe design” with Stitch" title="Introducing “vibe design” with Stitch" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/"><img src="https://b.hatena.ne.jp/entry/image/https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/" alt="はてなブックマーク - Introducing “vibe design” with Stitch" title="はてなブックマーク - Introducing “vibe design” with Stitch" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 6 https://getdesign.md/ AIエージェント向けのデザインシステムのDESIGN.mdを集めたコレクションサイト。 Vercel、Stripe、Figma、Apple、Spotifyなど62のWebサイトからデザインシステムの情報を収集し、プロジェクトにDESIGN.mdとして配置することでAIコーディ efcl 2026-04-10T03:37:54Z Design AI Tools <blockquote cite="https://getdesign.md/" title="getdesign.md — DESIGN.md collection for AI coding agents"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgetdesign.md%2F" alt="" /> <a href="https://getdesign.md/">getdesign.md — DESIGN.md collection for AI coding agents</a></cite><p><a href="https://getdesign.md/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/a0d9ff56f309b38ac5c656158e3fe3eea48962c0/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fgetdesign.md%2Fapi%2Fog%2Fdefault" alt="getdesign.md — DESIGN.md collection for AI coding agents" title="getdesign.md — DESIGN.md collection for AI coding agents" class="entry-image" /></a></p><p>All</p><p><a href="https://b.hatena.ne.jp/entry/s/getdesign.md/"><img src="https://b.hatena.ne.jp/entry/image/https://getdesign.md/" alt="はてなブックマーク - getdesign.md — DESIGN.md collection for AI coding agents" title="はてなブックマーク - getdesign.md — DESIGN.md collection for AI coding agents" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/getdesign.md/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 68 https://calmtech.com/ Amber CaseによるCalm Technologyの原則をまとめたサイト。 テクノロジーはユーザーの注意を最小限にしてアンビエンドな情報表示を活用し、必要最小限の機能に絞るべきという8つの原則を定義している。 ハプティクスやステー efcl 2026-04-05T13:46:13Z Design UX <blockquote cite="https://calmtech.com/" title="Calm Technology"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcalmtech.com%2F" alt="" /> <a href="https://calmtech.com/">Calm Technology</a></cite><p><a href="https://calmtech.com/"><img src="" alt="Calm Technology" title="Calm Technology" class="entry-image" /></a></p><p>Our world is made of information that competes for our attention. What is necessary? What is not? When we design products, we aim to choose the best position for user interface components, placing the most important ones in the most accessible places on the screen. Equally important is the design...</p><p><a href="https://b.hatena.ne.jp/entry/s/calmtech.com/"><img src="https://b.hatena.ne.jp/entry/image/https://calmtech.com/" alt="はてなブックマーク - Calm Technology" title="はてなブックマーク - Calm Technology" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/calmtech.com/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 4 https://www.aiuxpatterns.com/index.html AI製品むけのUXデザインパターンをまとめたガイドサイト。 AIを扱うプロダクト向けのUI/UXのパターンをまとめたサイト。 SuggestとかRecreatとかinputとか efcl 2026-03-16T10:33:55Z AI UX Design <blockquote cite="https://www.aiuxpatterns.com/index.html" title="Artificial Intelligence User Experience Design Patterns Guide"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.aiuxpatterns.com%2Findex.html" alt="" /> <a href="https://www.aiuxpatterns.com/index.html">Artificial Intelligence User Experience Design Patterns Guide</a></cite><p><a href="https://www.aiuxpatterns.com/index.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/e9d1a457952d0e44be3664fc0a9eddb893200e22/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Faiuxpatterns.com%2Fassets%2Fai-ux-patterns-hero.png" alt="Artificial Intelligence User Experience Design Patterns Guide" title="Artificial Intelligence User Experience Design Patterns Guide" class="entry-image" /></a></p><p>Artificial Intelligence User Experience Design Patterns An exploration of the UX design patterns applicable to designing effective experiences for AI. Sample Solution The below example shows how multiple patterns are compiled to create a complete user experience. This example is a simple yet fami...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.aiuxpatterns.com/index.html"><img src="https://b.hatena.ne.jp/entry/image/https://www.aiuxpatterns.com/index.html" alt="はてなブックマーク - Artificial Intelligence User Experience Design Patterns Guide" title="はてなブックマーク - Artificial Intelligence User Experience Design Patterns Guide" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.aiuxpatterns.com/index.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 5 https://github.com/southleft/figma-console-mcp AIアシスタントとFigmaを接続するMCPサーバ。 Figma MCPと違って、Figma Pluginを経由することでWriteの操作ができる。 デザイン変数、コンポーネント、スタイルの取得や、デザイントークンの作成/更新/削除ができる。 自然言語でU efcl 2026-03-16T10:16:01Z figma MCP Tools Design <blockquote cite="https://github.com/southleft/figma-console-mcp" title="GitHub - southleft/figma-console-mcp: Your design system as an API. Connect AI to Figma for extraction, creation, and debugging."><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgithub.com%2Fsouthleft%2Ffigma-console-mcp" alt="" /> <a href="https://github.com/southleft/figma-console-mcp">GitHub - southleft/figma-console-mcp: Your design system as an API. Connect AI to Figma for extraction, creation, and debugging.</a></cite><p><a href="https://github.com/southleft/figma-console-mcp"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4238bef2a034070099ea6836a18c330d2d83c90d/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fopengraph.githubassets.com%2Fc97f850e24c499a40e83354fa7008f127f58b46e472e5b96f552bf0ca091bfd0%2Fsouthleft%2Ffigma-console-mcp" alt="GitHub - southleft/figma-console-mcp: Your design system as an API. Connect AI to Figma for extraction, creation, and debugging." title="GitHub - southleft/figma-console-mcp: Your design system as an API. Connect AI to Figma for extraction, creation, and debugging." class="entry-image" /></a></p><p>You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert</p><p><a href="https://b.hatena.ne.jp/entry/s/github.com/southleft/figma-console-mcp"><img src="https://b.hatena.ne.jp/entry/image/https://github.com/southleft/figma-console-mcp" alt="はてなブックマーク - GitHub - southleft/figma-console-mcp: Your design system as an API. Connect AI to Figma for extraction, creation, and debugging." title="はてなブックマーク - GitHub - southleft/figma-console-mcp: Your design system as an API. Connect AI to Figma for extraction, creation, and debugging." border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/github.com/southleft/figma-console-mcp"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 4 https://github.com/pbakaus/impeccable AIコーディングエージェント向けのフロントエンドデザインのスキルとコマンドのセット。 タイポグラフィ、色彩、空間設計、モーション、インタラクション、レスポンシブデザイン、UXライティングなどのスキルを定義し efcl 2026-03-12T07:21:56Z AI Design CSS Tools <blockquote cite="https://github.com/pbakaus/impeccable" title="GitHub - pbakaus/impeccable: The design language that makes your AI harness better at design."><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgithub.com%2Fpbakaus%2Fimpeccable" alt="" /> <a href="https://github.com/pbakaus/impeccable">GitHub - pbakaus/impeccable: The design language that makes your AI harness better at design.</a></cite><p><a href="https://github.com/pbakaus/impeccable"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ea13db844c2a9568f5d44a4dea44dba52e7c300d/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fopengraph.githubassets.com%2F7b7579d105be2993208c9f829c6814faac04aecfb696521aad7b772b84a914f7%2Fpbakaus%2Fimpeccable" alt="GitHub - pbakaus/impeccable: The design language that makes your AI harness better at design." title="GitHub - pbakaus/impeccable: The design language that makes your AI harness better at design." class="entry-image" /></a></p><p>Anthropic created frontend-design, a skill that guides Claude toward better UI design. Impeccable builds on that foundation with deeper expertise and more control. Every LLM learned from the same generic templates. Without guidance, you get the same predictable mistakes: Inter font, purple gradie...</p><p><a href="https://b.hatena.ne.jp/entry/s/github.com/pbakaus/impeccable"><img src="https://b.hatena.ne.jp/entry/image/https://github.com/pbakaus/impeccable" alt="はてなブックマーク - GitHub - pbakaus/impeccable: The design language that makes your AI harness better at design." title="はてなブックマーク - GitHub - pbakaus/impeccable: The design language that makes your AI harness better at design." border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/github.com/pbakaus/impeccable"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 14 https://www.mockdown.design/ ASCIIベースのワイヤーフレームエディタ。 ボタンやカード、テーブルなどのUIコンポーネントをドラッグ&ドロップで配置し、ASCIIアートのワイヤーフレームをブラウザ上で作成できる。 Markdownへのエクスポートに対応し、レ efcl 2026-02-19T14:10:00Z Design editor Markdown Tools <blockquote cite="https://www.mockdown.design/" title="Mockdown — ASCII Wireframe Editor"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.mockdown.design%2F" alt="" /> <a href="https://www.mockdown.design/">Mockdown — ASCII Wireframe Editor</a></cite><p><a href="https://www.mockdown.design/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/9da3dd875a479383ccd1beec60c9e00e0f355e4b/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwww.mockdown.design%2Fog.png%3Fv%3D2" alt="Mockdown — ASCII Wireframe Editor" title="Mockdown — ASCII Wireframe Editor" class="entry-image" /></a></p><p>Select an object to edit it, or choose `spray`/`modal` to adjust tool defaults.</p><p><a href="https://b.hatena.ne.jp/entry/s/www.mockdown.design/"><img src="https://b.hatena.ne.jp/entry/image/https://www.mockdown.design/" alt="はてなブックマーク - Mockdown — ASCII Wireframe Editor" title="はてなブックマーク - Mockdown — ASCII Wireframe Editor" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.mockdown.design/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 45 https://variant.com/ プロンプトでデザインのプロトタイプを作って、そのデザインをremixしたりスタイルを変更しながら掘り下げて行って、デザインのアイデアを作っていくWebサービス efcl 2026-01-29T05:15:27Z Design AI webservice <blockquote cite="https://variant.com/" title="Variant – Endless designs for your ideas, just scroll"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fvariant.com%2F" alt="" /> <a href="https://variant.com/">Variant – Endless designs for your ideas, just scroll</a></cite><p><a href="https://variant.com/"><img src="" alt="Variant – Endless designs for your ideas, just scroll" title="Variant – Endless designs for your ideas, just scroll" class="entry-image" /></a></p><p>Enter an idea for an app or site and see endless design options just by scrolling.</p><p><a href="https://b.hatena.ne.jp/entry/s/variant.com/"><img src="https://b.hatena.ne.jp/entry/image/https://variant.com/" alt="はてなブックマーク - Variant – Endless designs for your ideas, just scroll" title="はてなブックマーク - Variant – Endless designs for your ideas, just scroll" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/variant.com/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 4 https://www.aidesignfieldguide.com/ AIとDesignerについてのブログ efcl 2026-01-10T03:53:09Z Design blog Interview <blockquote cite="https://www.aidesignfieldguide.com/" title="AI Design Field Guide"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.aidesignfieldguide.com%2F" alt="" /> <a href="https://www.aidesignfieldguide.com/">AI Design Field Guide</a></cite><p><a href="https://www.aidesignfieldguide.com/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/0ff22518845dc4f5476ecf0459d325417122e929/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwww.aidesignfieldguide.com%2Fshare-link.png" alt="AI Design Field Guide" title="AI Design Field Guide" class="entry-image" /></a></p><p>We&#39;re witnessing the birth of a new kind of designer: The AI Designer. Designers who work in evals, prompts, and tool calls. Designers who have as much of a taste for models as they do for fonts. Designers who think in mental models, agents, and intelligence. There&#39;s no textbook for this kind of ...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.aidesignfieldguide.com/"><img src="https://b.hatena.ne.jp/entry/image/https://www.aidesignfieldguide.com/" alt="はてなブックマーク - AI Design Field Guide" title="はてなブックマーク - AI Design Field Guide" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.aidesignfieldguide.com/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 4 https://designtokenscourse.com/ Design Tokenについての講座 efcl 2025-05-08T07:11:47Z Design video <blockquote cite="https://designtokenscourse.com/" title="Subatomic: The Complete Guide To Design Tokens"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fdesigntokenscourse.com%2F" alt="" /> <a href="https://designtokenscourse.com/">Subatomic: The Complete Guide To Design Tokens</a></cite><p><a href="https://designtokenscourse.com/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/13f8b6b41e3f4359a3d6ace9e44807ae188f999d/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fdesigntokenscourse.com%2Fimages%2Fsocial-card.png" alt="Subatomic: The Complete Guide To Design Tokens" title="Subatomic: The Complete Guide To Design Tokens" class="entry-image" /></a></p><p>World-renowned design systems experts Brad Frost (creator of Atomic Design) and Ian Frost teach you everything you need to know about creating an effective design token system to help your organization design and build at scale. Over 13 hours of in-depth videos Figma &amp; code sample architecture Na...</p><p><a href="https://b.hatena.ne.jp/entry/s/designtokenscourse.com/"><img src="https://b.hatena.ne.jp/entry/image/https://designtokenscourse.com/" alt="はてなブックマーク - Subatomic: The Complete Guide To Design Tokens" title="はてなブックマーク - Subatomic: The Complete Guide To Design Tokens" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/designtokenscourse.com/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 2 https://cerberus.digitalu.design/ Panda CSSを使ったデザインシステム efcl 2025-02-08T12:07:27Z css Design library React <blockquote cite="https://cerberus.digitalu.design/" title="Cerberus Design System"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcerberus.digitalu.design%2F" alt="" /> <a href="https://cerberus.digitalu.design/">Cerberus Design System</a></cite><p><a href="https://cerberus.digitalu.design/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/b0a7bdec119163bf8e06ead3f9a2b088e4f8090c/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcerberus.digitalu.design%2Fopengraph-image.png%3Fopengraph-image.0isnm22gg-jx4.png" alt="Cerberus Design System" title="Cerberus Design System" class="entry-image" /></a></p><p>Protect your brand with CerberusCreate React 19+ design systems effortlessly.</p><p><a href="https://b.hatena.ne.jp/entry/s/cerberus.digitalu.design/"><img src="https://b.hatena.ne.jp/entry/image/https://cerberus.digitalu.design/" alt="はてなブックマーク - Cerberus Design System" title="はてなブックマーク - Cerberus Design System" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/cerberus.digitalu.design/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 2 https://martinfowler.com/articles/design-token-based-ui-architecture.html Design TokenとUIの開発について。 Design Tokenの2つ or 3つのレイヤーへの分割、Tokenのスコープ、Design Tokenのメリット/デメリットについて efcl 2024-12-21T12:12:53Z Design UI architecture article <blockquote cite="https://martinfowler.com/articles/design-token-based-ui-architecture.html" title="Design Token-Based UI Architecture"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fmartinfowler.com%2Farticles%2Fdesign-token-based-ui-architecture.html" alt="" /> <a href="https://martinfowler.com/articles/design-token-based-ui-architecture.html">Design Token-Based UI Architecture</a></cite><p><a href="https://martinfowler.com/articles/design-token-based-ui-architecture.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/bb107d0e155b15deffeaefee2336661ea446a540/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fmartinfowler.com%2Farticles%2Fdesign-token-based-ui-architecture%2Fcard.png" alt="Design Token-Based UI Architecture" title="Design Token-Based UI Architecture" class="entry-image" /></a></p><p>Design tokens are design decisions as data and serve as a single source of truth for design and engineering. Utilizing deployment pipelines, they enable automated code generation across platforms, allowing for faster updates and improved consistency in design. Organizing tokens in layers—progress...</p><p><a href="https://b.hatena.ne.jp/entry/s/martinfowler.com/articles/design-token-based-ui-architecture.html"><img src="https://b.hatena.ne.jp/entry/image/https://martinfowler.com/articles/design-token-based-ui-architecture.html" alt="はてなブックマーク - Design Token-Based UI Architecture" title="はてなブックマーク - Design Token-Based UI Architecture" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/martinfowler.com/articles/design-token-based-ui-architecture.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 33 https://gihyo.jp/book/2024/978-4-297-14411-1 2024年10月2日 発売 ニジボックスのデザインシステムについての書籍 efcl 2024-09-17T22:50:33Z Design UI book <blockquote cite="https://gihyo.jp/book/2024/978-4-297-14411-1" title="つくって、みなおす、デザインシステム | 技術評論社"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgihyo.jp%2Fbook%2F2024%2F978-4-297-14411-1" alt="" /> <a href="https://gihyo.jp/book/2024/978-4-297-14411-1">つくって、みなおす、デザインシステム | 技術評論社</a></cite><p><a href="https://gihyo.jp/book/2024/978-4-297-14411-1"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/87def7bb87dd007d6ffbe9c2a46e654e3a654261/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2Fogp%2F2024%2F9784297144111.jpg" alt="つくって、みなおす、デザインシステム | 技術評論社" title="つくって、みなおす、デザインシステム | 技術評論社" class="entry-image" /></a></p><p>概要 サービスやプロダクトのデザインをまとまりのあるものにするための「デザインシステム」の重要性が知られるようになった昨今ですが、有効なデザインシステムを作る流れや、実効的に運用・見直しを行っていくための知見はまだまとまっていない状況にあります。本書ではそのような「生きたデザインシステムを作り運用...</p><p><a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/book/2024/978-4-297-14411-1"><img src="https://b.hatena.ne.jp/entry/image/https://gihyo.jp/book/2024/978-4-297-14411-1" alt="はてなブックマーク - つくって、みなおす、デザインシステム | 技術評論社" title="はてなブックマーク - つくって、みなおす、デザインシステム | 技術評論社" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/gihyo.jp/book/2024/978-4-297-14411-1"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 29 https://github.com/govuk-vue/govuk-vue GOV.UK Design SystemのUIコンポーネントのVue実装 efcl 2024-09-16T02:35:40Z Vue Design UI library <blockquote cite="https://github.com/govuk-vue/govuk-vue" title="GitHub - govuk-vue/govuk-vue: A Vue 3 component library for GOV.UK Frontend and the GOV.UK Design System"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgithub.com%2Fgovuk-vue%2Fgovuk-vue" alt="" /> <a href="https://github.com/govuk-vue/govuk-vue">GitHub - govuk-vue/govuk-vue: A Vue 3 component library for GOV.UK Frontend and the GOV.UK Design System</a></cite><p><a href="https://github.com/govuk-vue/govuk-vue"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/e41b232cd38422e76b1ec47ce8ac6aed1ce2a2cd/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fopengraph.githubassets.com%2F275a2865ab42cbc8d3a3e9089846739434a56122c61a61af5d1e54bac067fba4%2Fgovuk-vue%2Fgovuk-vue" alt="GitHub - govuk-vue/govuk-vue: A Vue 3 component library for GOV.UK Frontend and the GOV.UK Design System" title="GitHub - govuk-vue/govuk-vue: A Vue 3 component library for GOV.UK Frontend and the GOV.UK Design System" class="entry-image" /></a></p><p>You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert</p><p><a href="https://b.hatena.ne.jp/entry/s/github.com/govuk-vue/govuk-vue"><img src="https://b.hatena.ne.jp/entry/image/https://github.com/govuk-vue/govuk-vue" alt="はてなブックマーク - GitHub - govuk-vue/govuk-vue: A Vue 3 component library for GOV.UK Frontend and the GOV.UK Design System" title="はてなブックマーク - GitHub - govuk-vue/govuk-vue: A Vue 3 component library for GOV.UK Frontend and the GOV.UK Design System" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/github.com/govuk-vue/govuk-vue"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 4