Ameba Design System Spindle

みなさん、はじめまして。@AmebaSpindleです。このアカウントでは、Amebaのデザインシステム「Spindle」の更新情報や取り組みを紹介していきます。 Spindleの詳細は公式サイトspindle.ameba.designで公開されていますので、ぜひ閲覧してみてください💁

🟢新着記事のお知らせ Spindleデザインリードである @Windom40 がAI時代のデジタルプロダクトデザインを実体験に基づきながら考察しています。 実装の違和感を見過ごさず、見つけた粗は自分で直す。AI活用で実現したリアルな開発体験が書かれています。 ぜひご覧ください✋ developers.cyberagent.co.jp/blog/archives/…

📝新着記事のお知らせ 🟢職種を越えた双方向の越境 🟢共通基盤としてのデザインシステムの再定義 🟢AIと手動の柔軟な使い分け Spindleチームで当たり前になりつつある「AIエージェントを介した新しい共創スタイル」について、 ぜひチェックしてみてください✨💚 developers.cyberagent.co.jp/blog/archives/…

📣 新着記事のお知らせ 📣 Amebaブランドのデザインシステム「Spindle」（@AmebaSpindle）は、単なるルール集ではなく、プロダクトのデザインを牽引する存在として機能しています。 Figmaを基盤に、どう“参加したくなる運用”を実現しているのか。 運用チームのデザインリード・本田雅人さん、テクニカルリード・原一成さんに、Spindleの現在地と、その裏側をうかがいました。 👇 記事はこちら webdesigning.book.mynavi.jp/article/26900/

🎊 Happy New Year 2026 🎊 新年あけましておめでとうございます🎍🌄 Spindleより、謹んで新春をお祝い申し上げます💚 本年もAmebaデザインシステム「Spindle」をよろしくお願いいたします🧍🟢

＼2025年、AmebaLIFEのアクセシビリティ振り返り📝🐍／ 🟢 合理的配慮のお問い合わせ窓口を新設 🟢 AIによる画像の代替テキスト自動生成🤖 🟢 Spindleコンポーネントのa11y改善 🟢 交流会・登壇・社内ゼミの開催 developers.cyberagent.co.jp/blog/archives/…

＼2025年、Spindleの開発振り返り📝🐍／ 🟢 Spindle MCP作成とユースケース 🟢 Figma MCPを使ったコード自動生成 🟢 AI協業でリポジトリ改善、開発量アップ📈 developers.cyberagent.co.jp/blog/archives/…

Chrome DevTools MCP を使って、Ameba のデザインシステム「Spindle」のランタイムエラー修正を自動化したケーススタディが公開されました🧑‍💻🟢✨ developer.chrome.com/blog/autofix-r…

いよいよ明日 11/29 (土) 開催です！🎉 MTDDC Meetup TOKYO 2025 にて、Amebaデザインシステム「Spindle」の今年の進化についてお話しさせていただきます🟢 1年間の取り組みや変化を凝縮しました。 参加されるみなさま、どうぞよろしくお願いいたします💫 #MTDDC mt-tokyo.net/mtddc2025/spea…

12月3日 18:00からのデザインシステムの新機能についてのオンラインイベントにて、盟友の @Windom40 にもゲストとして出演いただけることになりました。デザインシステム @AmebaSpindle の設計への影響や期待とかそのあたりを伺えればとおもいます。 登録はこちらから events.figma.com/schematokyo202…

Spindle MCP を活用した新規コンポーネント開発の記事（著者: @yu_3in）が公開されました🟢 従来の開発と比べてどのように進化したのか、ぜひご覧ください💫 developers.cyberagent.co.jp/blog/archives/…

Spindleサイトの「ブランドガイドライン」を更新🟢 ドットマネーのガイドラインが追加されました🗒️ spindle.ameba.design/brand/ameba-br…

＼テーマは「拡張」🟩／ Spindle SUMMIT 2025開催レポートが公開されました🗒️ 注目トピック 🟢EXPANSION PACKで新メディアに対応 🟢PRODUCTすごろくで新規開発を支援 🟢MCPサーバーで実装が10倍高速化 表彰やLTもあり盛りだくさん🙌 記事は以下のURLでご覧いただけます💁 about.ameba.jp/contents/spind…

Coding: @syasuda90, @pagu0602 Video Production: @Windom40 Direction: @herablog

＼Spindle🤝AIを検証🟢／ デザインシステムとAIの融合はどれだけ開発を加速させるのか？ 先日発表された「Figma Dev Mode MCP Server」を使ってみました✋🧐 自作のSpindle MCP Serverと連携するとさらに・・・ 高精度かつ「約10倍はやい」可能性が😮💫 検証の様子は動画でご覧いただけます😉▶️

Figma Dev Mode MCP x Spindle連携は⤵️ 1⃣ FigmaデザインファイルをFigma Dev Mode MCP Serverを介してReact + Tailwind CSS実装に 2⃣ React + Tailwind CSS実装をSpindle MCP Serverを介してSpindle UI実装に AIエディタ(今回はCursor)が自動的にデータを取得しソースコードが構築されていきます🧐

Figma Dev Mode MCP Server と Spindle MCP Server 連携の詳細は、以下の記事で公開されています🟢 developers.cyberagent.co.jp/blog/archives/…

＼Spindle🤝Figma📷／ SpindleがFigmaを活用して、どのような仕組みを構築しているのか。 🟢Code Connect 🟢Variables x レスポンシブ設計 🟢テキストチェック 🟢Code Generator アクセシビリティチェックリストやDesign Docなどにも触れています。 ぜひご覧ください📺 youtube.com/watch?v=Aw7ZWi…

＼新規コンポーネント「ButtonSwitch」誕生🟢／ インターンシップに参加してくれた @newt239 の記事が公開されました✨ どのようにSpindle新規コンポーネントを作成したのか、ぜひご覧ください🤩 developers.cyberagent.co.jp/blog/archives/…

🎍謹賀新年🎍 2025年、あけましておめでとうございます。 Spindleより、謹んで新春をお祝い申し上げます🟢 本年もAmebaデザインシステム Spindleをどうぞよろしくお願いいたします🧍💚

＼2024年、Amebaデザインシステム Spindleの取り組みを振り返えってみました📝🐲／ 🟢 デザインとエンジニアリングの協働 🟢 Figmaの開発拠点化 🟢 開発速度3倍 🟢 登壇や勉強会による発信と浸透 🟢 Ameba20周年 今年もありがとうございました🧍💚 developers.cyberagent.co.jp/blog/archives/…