技能 page-builder
🧩
page-builder
安全 ⚙️
外部命令🌐
网络访问📁
文件系统访问
使用 Tailark UI 元件打造登陸頁
從零開始建立行銷頁面太耗時。此技能提供依頁面類型整理的 Tailark 預建元件精選建議，協助你在幾分鐘內組裝專業的登陸頁。
支持: Claude Codex Code(CC)
1
下载技能 ZIP
2
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
3
开启并开始使用
测试它
正在使用“page-builder”。 Build a landing page with hero, features, and pricing
预期结果:
- 針對你的登陸頁，我建議：HeroSection 作為主要橫幅與行動呼籲，Features-12（手風琴樣式）展示產品運作方式，LogoCloud 展示受信任的客戶，並使用 Pricing 或 PricingComparator 提供方案細節。將它們依語意放入 <main> 標籤中，並透過全域主題自訂配色。
正在使用“page-builder”。 Create an about page for a software company
预期结果:
- 針對你的關於頁，左側使用 Content-2 放公司故事，右側搭配遮罩圖片。加入 StatsSection，以醒目數字展示指標。包含 TeamSection 與照片及滑鼠懸停細節。最後在底部以 CallToAction 結尾。
安全审计
安全v5 • 1/16/2026
Documentation-only skill containing markdown files with component selection guidance. No executable code, scripts, network calls, or filesystem access capabilities detected. All 136 static findings are false positives caused by the scanner misidentifying markdown backtick formatting, file path references, and metadata as security threats.
3
已扫描文件
422
分析行数
3
发现项
5
审计总数
风险因素
⚙️ 外部命令 (113)
reference.md:7 reference.md:8 reference.md:11 reference.md:14 reference.md:15 reference.md:23 reference.md:24 reference.md:30 reference.md:31 reference.md:37 reference.md:38 reference.md:41 reference.md:41 reference.md:44 reference.md:45 reference.md:48 reference.md:53 reference.md:54 reference.md:60 reference.md:61 reference.md:69 reference.md:70 reference.md:76 reference.md:77 reference.md:85 reference.md:86 reference.md:92 reference.md:93 reference.md:101 reference.md:102 reference.md:108 reference.md:109 reference.md:117 reference.md:118 reference.md:124 reference.md:125 reference.md:131 reference.md:132 reference.md:138 reference.md:139 reference.md:147 reference.md:148 reference.md:158 reference.md:159 reference.md:160 reference.md:161 reference.md:162 reference.md:163 reference.md:164 reference.md:165 reference.md:166 reference.md:167 reference.md:168 reference.md:169 reference.md:170 reference.md:171 reference.md:172 reference.md:173 reference.md:174 reference.md:175 reference.md:176 reference.md:177 reference.md:178 reference.md:179 reference.md:180 reference.md:181 reference.md:182 reference.md:183 reference.md:183 reference.md:184 reference.md:185 reference.md:186 reference.md:187 reference.md:188 reference.md:189 reference.md:190 reference.md:191 reference.md:192 reference.md:193 reference.md:194 reference.md:195 reference.md:195 reference.md:196 reference.md:197 reference.md:198 reference.md:199 reference.md:200 reference.md:200 reference.md:201 reference.md:202 reference.md:203 reference.md:204 reference.md:205 reference.md:206 SKILL.md:14 SKILL.md:16 SKILL.md:17 SKILL.md:18 SKILL.md:22 SKILL.md:22 SKILL.md:22 SKILL.md:22 SKILL.md:22 SKILL.md:23 SKILL.md:23 SKILL.md:23 SKILL.md:24 SKILL.md:24 SKILL.md:24 SKILL.md:25 SKILL.md:30 SKILL.md:31 SKILL.md:35
🌐 网络访问 (1)
📁 文件系统访问 (1)
审计者: claude 查看审计历史 →
质量评分
38
架构
100
可维护性
85
内容
22
社区
100
安全
91
规范符合性
你能构建什么
快速組裝登陸頁
透過選用推薦的 Tailark 元件堆疊，快速組裝專業登陸頁。
行銷頁規劃
使用針對不同頁面類型的預先定義元件組合來規劃行銷頁結構。
快速上線頁面
使用精選、可上線的 UI 元件快速建立可發佈頁面。
试试这些提示
基本登陸頁
Build a landing page with a hero section, features, social proof, and call to action.
定價比較
Create a pricing page with comparison tables and FAQ section.
關於頁
Build an about page with team section, company stats, and content narrative.
自訂行銷頁
Compose a marketing page combining contact section, integrations display, and testimonials.
最佳实践
- 依各頁面類型採用推薦的元件堆疊以確保視覺一致性。
- 在部署前以真實素材取代佔位圖片與圖示。
- 需要大幅變更時，將元件複製到本地再進行客製化。
避免
- 不要在未檢視其複雜度與相依性前就匯入元件。
- 避免在單一頁面混用過多不同元件風格。
- 不要跳過元件選擇策略——它能確保頁面設計一致。
常见问题
這個技能支援哪些工具？
此技能可與 Claude、Codex 與 Claude Code 搭配，用於組合行銷頁。
我可以客製化元件嗎？
可以，你可以在本地複製元件並修改文字、圖片、顏色與版面。
這個技能會寫程式碼嗎？
不行，此技能提供指引。請使用 ui-handler 實際實作元件。
元件是否具備響應式？
會，所有 Tailark 元件皆以 Tailwind CSS 建置並具備完整響應式設計。
需要哪些相依套件？
元件使用 lucide-react 圖示、next/image，且部分需要 motion/react 或 recharts。
這和 ui-handler 有何不同？
ui-handler 負責安裝元件，page-builder 協助你有效選擇並組合它們。