AI 網站組件生成器。

用 AI 生成按鈕、輸入框、卡片、模態對話框、導覽列、英雄區塊等。複製提示詞，數秒內獲得可直接上線的組件。

Why Generate Components With MeDo

A prompt-first component workflow: the prompt is the artifact, the output is real code you own, and the same component drops into whichever editor you already use.

01 / 06

From a Prompt to a Production Component

Type "a pricing table with three tiers and a monthly-yearly toggle" and MeDo returns React and Tailwind code with a live preview. No hunting through a docs site for the closest example, no reverse-engineering someone else's prop API.

What You Can Generate With MeDo

Every common part of a modern web app — reusable UI primitives, full-width page sections, and complete pages — available as a prompt-generated, themeable React component.

選擇要生成的組件，或描述你自己的需求。

UI 組件

可重用的零件，隨處可用——按鈕、輸入框、卡片、模態對話框和導覽。

按鈕

描述你的品牌，MeDo即可生成整套按鈕體系 — primary、secondary、ghost 與危險操作四種變體，三種尺寸，再加上懸停、聚焦、載入及停用狀態。一個提示詞，一套統一規範。

生成

輸入框

描述你的表單，MeDo 會同時生成文字輸入框與多行文字框 — 標籤、輔助文字、錯誤狀態、前綴與後綴附加元素、字數計算以及高度自動調整，全部連接到正確的無障礙屬性。

生成

卡片

描述卡片承載的內容，MeDo即可生成完整容器 — 媒體、標題、內文與頁腳插槽，懸停浮起效果，以aspect-ratio鎖定的圖片，格線中的等高排列，以及配套的骨架狀態。

生成

模態對話框

描述您需要的對話框，MeDo會生成整套結構 — 標題列、可捲動主體和操作底列，還包含焦點鎖定、關閉時焦點還原、body捲動鎖定，以及行動裝置底部彈層變體。

生成

提示框

描述你需要的提示，MeDo會生成完整行為 — 開啟與關閉延遲、避開視區邊緣的翻轉、始終對準觸發元素的箭頭、鍵盤焦點觸發，以及aria-describedby關聯。

生成

浮動提示

描述你的通知行為，MeDo即可產生完整的Toast系統 — 四種語意類型、堆疊佇列、游標懸停時暫停的自動消失計時器、觸控滑動關閉，以及為每種類型設定正確的aria-live播報層級。

生成

警示訊息

描述訊息內容，MeDo 便會產生完整的頁內警示訊息組合 — 資訊、成功、警告、錯誤四款變體，附強調色條、圖示、標題、說明文字、選用的操作連結，以及當警示訊息毋須長期顯示時的關閉控制項。

生成

徽章

描述你的狀態，MeDo便產生整套徽章 — 語意化狀態標籤、可移除的標籤片、帶99+溢出的數字計數，以及疊在頭像上也不會被裁切的圓點指示器。

生成

頭像

從一句提示詞生成可上線的頭像。6 個開源模式 — 照片、Notion 風格插畫、首字母備援、在線狀態徽章、疊加頭像組、上載器 — 全部採用 Tailwind + shadcn，符合無障礙標準、可換主題並以 MIT 授權。直接複製程式碼，或把其中任何一個重新生成到你的 Lovable、Bolt、v0 或 Cursor 專案中。

生成

分頁標籤

描述你的面板，MeDo 就會生成完整的分頁標籤元件 — 正確的 ARIA 角色、方向鍵導覽、帶動畫的啟用指示線、手機版溢出處理，以及與網址同步、重新載入後依然保留的啟用標籤。

生成

摺疊面板

描述你的區段，MeDo即生成可摺疊面板——單開或多開行為、適配任何內容長度的高度動畫、自動展開指定面板的深層連結，以及用於複合式搜尋結果的FAQPage JSON-LD。

生成

搜尋列

描述用戶會搜尋什麼，MeDo即生成完整元件 — 防抖查詢、即時建議下拉選單、方向鍵操作、最近搜尋、載入與沒有結果狀態，以及用來聚焦的 cmd+K 快捷鍵。

生成

下拉選單

描述你的選項，MeDo即可生成完整選單 — 觸發器、面板、帶分隔線的分組區塊、子選單、方向鍵與首字母跳轉、Escape與點擊外部關閉，以及關閉時焦點返回觸發器。

生成

導覽列

描述您的網站，獲得完全響應式導覽列 — 包含Logo、導覽連結、下拉選單和行動裝置漢堡選單 — 從一個提示詞生成。無需範本，無需繁瑣調整。

生成

頁首

描述您頁面的頂部，MeDo就會建構整條橫帶 — Logo與品牌標誌組合、置於其上方的選用公告列、帶毛玻璃模糊的置頂捲動行為，以及CTA。導覽連結就住在裡面；頁首是把它們框起來的一切。

生成

側邊欄

描述您需要的側邊欄 — 導航連結、巢狀選單、過濾器或小工具 — MeDo在幾秒內生成乾淨的、可投入生產的程式碼。無需腳手架，無需樣板程式碼。

生成

麵包屑導航

輸入提示詞，幾秒鐘內獲得完整樣式的麵包屑導航元件。MeDo理解您的網站結構，生成簡潔、無障礙的路徑標記 — 隨時可嵌入任意頁面。

生成

頁腳

描述您需要的頁腳 — 欄位、連結、法律文字、社交圖示 — MeDo在數秒內生成生產級程式碼。永遠告別複製貼上樣板程式碼。

生成

聯絡表單

描述您需要的欄位、想要的語氣和重要的驗證規則——MeDo在幾秒內將您的提示詞轉化為完整的、無障礙的聯絡表單元件。

生成

Cookie橫幅

描述您需要的Cookie同意體驗 — 橫幅樣式、按鈕標籤、法律文案、配色方案 — MeDo即刻產生生產就緒的程式碼。無需範本即可發佈合規的、符合品牌的Cookie橫幅。

生成

載入動畫

話畀MeDo知你需要咩類型嘅載入動畫——環形、彈跳圓點、脈衝圓圈、骨架屏覆蓋——即刻取得生產就緒嘅元件程式碼。唔使搜尋CodePen，唔使手動調整keyframes。

生成

頁面區塊

全寬區塊，層層堆疊成完整頁面——英雄區塊、功能網格、定價表和 CTA。

英雄區塊

寫一句嘢描述你喺度建構咩，即刻攞到完整嘅首屏英雄區塊——標題、副標題、行動號召同佈局——即刻可用。

生成

功能網格

用簡單的中文描述您的產品優勢，MeDo在幾秒內產生一個精緻的響應式功能網格。更換圖示、調整欄數、優化文案 — 全程無需編寫一行程式碼。

生成

客戶評價

描述您需要的社會證明區 — 引用風格、星級評分、頭像佈局、網格或輪播 — MeDo在幾秒內生成生產就緒代碼。讓您的客戶來做銷售。

生成

圖片畫廊

描述您想要的網格，MeDo在數秒內生成完全設計好的圖片畫廊。瀑布流佈局、燈箱覆蓋層、懸停效果、響應式斷點 — 全部來自一個提示詞。

生成

博客區塊

描述你想要的博客版面 — 卡片樣式、文章數量、精選文章、分類篩選器 — MeDo生成完整元件。無需觸碰一行CSS grid屬性，就能交付精美的博客區塊。

生成

定價表

描述您的方案，讓AI完成繁重的工作。從方案名稱和功能列表到切換開關和推薦方案高亮——一鍵生成，即刻可用。

生成

CTA區塊

將一句話簡報變成高轉換的行動呼籲區塊。標題、支援文案和按鈕——全部產生，可直接嵌入你的頁面。

生成

電子報訂閱

一句話簡報即可生成精美的電子報訂閱區域。電郵輸入框、輔助文案、社交證明和樣式化程式碼 — 全部生成，即可部署。

生成

完整頁面

整頁由頭到尾一次生成，隨時可發布。

404頁面

頁面遺失無可避免——但平庸的404可以避免。描述你品牌的風格，MeDo產生包含插圖、清晰導覽和讓訪客留下而非離開的文案的完整設計錯誤頁面。

生成

Who Uses the Component Generator

Indie hackers, vibe coders, designers, agencies, non-technical founders and design system teams all reach for the same starting patterns.

Indie Hackers Shipping Fast

Skip a week of layout work. Generate a hero, a pricing table and a footer, assemble them in one MeDo project, and put the landing page live tonight.

Vibe Coders on Lovable and Bolt

Stop asking your AI editor to redraw the same navbar and getting a different answer each time. Copy a specific prompt from here and the output stays consistent across runs.

Designers Prototyping in Real Code

Prototype with actual Tailwind components instead of static frames. Every component is responsive and interactive, so the handoff is the artifact rather than a spec describing one.

Agencies Standardizing Deliverables

Start every client site from the same vetted set — one navbar, one hero, one pricing block — and retheme rather than rebuild. The layout stays battle-tested across handoffs.

Non-Technical Founders

You do not need to know React or Tailwind. Describe the section you want, drop it into your MeDo project, and keep editing in plain English.

Design System Teams

Use these as the reference spec for your own components. Each page documents the states and edge cases a component has to handle, which is the part usually missing from an internal library.

How to Generate a Component With MeDo

From a prompt to a themeable component in four steps — no copy-pasting from a docs site, no wiring up someone else's prop API.

01~30s

Describe the Component

Type a prompt like "a dark footer with four link columns, newsletter signup and social icons", or start from one of the prompts on any component page.

02~1min

Preview and Iterate

A live preview renders next to the code. Refine with follow-up prompts, adjust the theme tokens, or edit the JSX directly — whichever is faster for the change you want.

03~10s

Copy or Import

Copy the prompt into Lovable, Bolt, v0 or Cursor, take the raw code, or keep building in MeDo where the component lands as a real file with its dependencies wired up.

04~2min

Ship It

Publish from MeDo to a live URL, or commit the component into your own repository. The code is yours either way — nothing here needs MeDo at runtime.

Component Generator FAQ

How is this different from a Tailwind UI kit or a component library?

A kit gives you a fixed catalogue to copy from; when your case is slightly different, you are editing someone else's code. Here the prompt is the artifact — you edit the description and regenerate, so the component matches your case instead of the nearest catalogue entry. The generated code is plain React and Tailwind with no runtime dependency on MeDo.

Which frameworks and stacks do the components support?

Components are authored as React and TypeScript with Tailwind CSS — the same stack Lovable, Bolt, v0 and Cursor projects use. Each component page also shows the same component mounted in Next.js, Vue 3, SvelteKit, Astro and plain HTML, since the markup itself is framework-agnostic.

What does it cost to generate a component?

Generating and previewing components in MeDo runs on the same credits as the rest of the builder, and there is a free allowance to start with. Downloading the full source of a project is a separate credit cost. See the pricing page for the current numbers.

Can I use these prompts in Lovable, Bolt, v0 or Cursor?

Yes. The prompts are plain English with no MeDo-specific syntax, so they run in any AI editor. Every component page has a copy button for exactly this, and the specificity is the point: a vague prompt produces a different component every run, while these name the states and edge cases explicitly.

Do the generated components handle accessibility?

Each component page states the accessibility contract for that component — focus trapping and restore for modals, live-region politeness for toasts, hidden text labels for anything that would otherwise convey meaning through color alone. Those requirements are in the prompts, so they are in the generated code rather than being a follow-up task.

Can MeDo generate a component that is not listed here?

Yes. The pages here cover the components people search for most, but the generator takes any description. If you need something unusual, describe it directly rather than looking for the closest listed match.

需要自訂組件？直接描述就行。

MeDo 可根據提示詞生成任何網站組件——無需範本。

免費開始構建