Awesome Design.MD - นำระบบดีไซน์ของเว็บไซต์ชื่อดังมาใช้กับเว็บไซต์ของคุณ

 (github.com/VoltAgent)
117 คะแนน โดย xguru 24 일 전 | 5 ความคิดเห็น | แชร์ทาง WhatsApp
  • DESIGN.md คือ แนวคิดที่ Google Stitch นำมาใช้ เพื่อให้ AI agent อ่านและสร้าง UI ที่สอดคล้องกันได้ โดยเป็น เอกสารออกแบบแบบข้อความ
  • โดยไม่ต้องใช้ Figma, JSON schema หรือ tooling แยกต่างหาก เพียงคัดลอก ไฟล์ Markdown ไฟล์เดียว ไปไว้ที่ root ของโปรเจกต์ AI coding agent ก็จะรับรู้สไตล์ UI ได้ทันที
  • ใช้งานเป็นคู่กับ AGENTS.md เดิม โดย DESIGN.md ใช้กำหนด รูปลักษณ์และความรู้สึกทางภาพ
  • แต่ละไฟล์ประกอบด้วย 9 ส่วนมาตรฐาน ครอบคลุม color palette, typography, component styling, layout, responsive behavior และอื่นๆ
  • แต่ละเว็บไซต์มีชุด 3 ไฟล์ ให้ ได้แก่ DESIGN.md + preview.html + preview-dark.html
  • รวมระบบดีไซน์ของบริการมากกว่า 60 รายการ ในกลุ่ม AI, เครื่องมือพัฒนา, ฟินเทค, เอนเทอร์ไพรส์ เช่น Claude, Vercel, Stripe, Notion, Figma, Cursor
    • คัดลอก DESIGN.md ของเว็บไซต์ที่ต้องการไปไว้ที่ root ของโปรเจกต์ แล้วสั่ง AI agent ให้อ้างอิงไฟล์นั้นเพื่อสร้าง UI
    • เพียงพูดว่า "ช่วยสร้างหน้าที่หน้าตาแบบนี้ให้หน่อย" ก็สามารถสร้าง UI ที่ตรงกับเว็บไซต์ต้นฉบับได้
  • สัญญาอนุญาต MIT

โครงสร้างของแต่ละไฟล์ DESIGN.md

  • ใช้ฟอร์แมต Stitch DESIGN.md และขยายเป็น 9 ส่วนตามด้านล่าง

    # ส่วน เนื้อหาที่บันทึก
    1 Visual Theme & Atmosphere มู้ด ความหนาแน่น แนวคิดด้านดีไซน์
    2 Color Palette & Roles ชื่อสี + HEX + บทบาทเชิงหน้าที่
    3 Typography Rules font family, ตารางลำดับชั้นทั้งหมด
    4 Component Stylings ปุ่ม การ์ด ช่องกรอกข้อมูล navigation และสถานะ
    5 Layout Principles สเกลระยะห่าง กริด ปรัชญาเรื่องพื้นที่ว่าง
    6 Depth & Elevation ระบบเงา ลำดับชั้นของพื้นผิว
    7 Do's and Don'ts แนวทางการออกแบบและ anti-pattern
    8 Responsive Behavior breakpoint, touch target, กลยุทธ์การย่อขนาด
    9 Agent Prompt Guide อ้างอิงสีแบบรวดเร็ว พรอมป์ต์ที่พร้อมใช้งานทันที

คอลเลกชันที่รวมอยู่

  • AI & Machine Learning: Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI
  • Developer Tools & Platforms: Cursor, Expo, Linear, Lovable, Mintlify, PostHog, Raycast, Resend, Sentry, Supabase, Superhuman, Vercel, Warp, Zapier
  • Infrastructure & Cloud: ClickHouse, Composio, HashiCorp, MongoDB, Sanity, Stripe
  • Design & Productivity: Airtable, Cal.com, Clay, Figma, Framer, Intercom, Miro, Notion, Pinterest, Webflow
  • Fintech & Crypto: Coinbase, Kraken, Revolut, Wise
  • Enterprise & Consumer: Airbnb, Apple, BMW, IBM, NVIDIA, SpaceX, Spotify, Uber

บทความที่เกี่ยวข้อง

5 ความคิดเห็น

 
hidarite 24 일 전

แนวคิดก็ดีและดูเหมือนจะมีประโยชน์อยู่เหมือนกันนะครับ... การออกแบบเว็บก็น่าจะมีลิขสิทธิ์อยู่ด้วย เลยสงสัยว่าการคัดลอกทั้งชุดแบบนี้ไปใช้จะไม่มีปัญหาเรื่องลิขสิทธิ์หรือ และจะไม่มีปัญหาในเชิงจริยธรรมทางธุรกิจหรือไม่
 
tsboard 18 일 전

ผมก็คิดแบบนี้ขึ้นมาทันทีเหมือนกัน ช่วงนี้ดูเหมือนว่าบริการหรือเอเจนต์ AI จะตั้งสมมติฐานไปเลยว่ามีอำนาจระดับอยู่นอกกรอบกฎหมายบางอย่างอยู่แล้ว แบบว่าเดินหน้าต่อไปทั้งที่ยังปิดตาไว้ครึ่งหนึ่งแบบนี้ได้จริงเหรอ? อะไรทำนองนั้น...
 
kaydash 23 일 전

ดีครับ คนที่ทำงานด้านฟรอนต์เอนด์และดีไซน์มักจะเตรียมของแบบนี้ไว้ล่วงหน้าแล้วค่อยเริ่มกัน
 
m00nlygreat 24 일 전

แต่ปกติแล้ว ในเฟรมเวิร์กฝั่งฟรอนต์เอนด์ก็มักจะมีดีไซน์ซิสเต็มอยู่ในรูปของชิ้นส่วนโค้ดข้างในอยู่แล้ว แบบนี้ไม่ควรต้องใช้มันร่วมกันเป็นมาตรฐานหรือครับ..?

การบอกว่ายึดตาม DESIGN.md ฟังดูเหมือนจะหมายถึงว่า จะสร้างสีและข้อกำหนดเหล่านั้นขึ้นมาเองตามอำเภอใจทุกครั้งมากกว่า ...
 
hmmhmmhm 24 일 전

หวังว่าจะถูกนำไปใช้ไม่ใช่แค่การคัดลอกตรง ๆ แต่เป็นการสร้างดีไซน์ซิสเต็มใหม่ขึ้นมาโดยอิงจากดีไซน์ซิสเต็มหลายแบบมากกว่าครับ