如何用 Claude Code 做出能卖 1w 美元的网站
文章分享了使用 Claude Code 快速构建高端作品集网站的全过程。作者通过安装 Frontend Design 和 UI/UX Pro Max 技能，结合 Awwwards 参考图，利用精准的 Prompt 和交互式反馈，仅用 2 小时就完成了价值 5000 美元的设计，并详细介绍了动画实现、走查修复和最终打磨的方法。
相关文档
最近一个月收藏和推荐的 Skills 合集（建议收藏）
作者整理了近一个月收藏和推荐的 Claude Agent Skills 资源合集。内容分为三大类：一是作者自研的开源 Skills（信息卡生成、品牌复刻 DESIGN.md、SVG 手绘效果）；二是 UI/UX 设计类 Skills，包括设计工程师审美经验、去 AI 味前端设计品味、Remotion Skills 2.0 及 Atlassian 对 DESIGN.md 的实测等；三是 Skills 构建与方法论，涵盖 33 页完整构建指南及中文翻译、Google Research 的 WikiSkill、Warp 的自我改进 Agent 与 Skill Doctor 等。最后还推荐了精选单点 Skills，如去 AI 味 Top 10、Cursor 代码质量审查、show-me 图示 Skill、Unslop 写作优化等。
Full Guide: How To Use Claude Design Inside Claude Code
本文详细介绍了如何将 Claude Design（Anthropic 的对话式设计工作区）与 Claude Code 结合使用的工作流。作者讲解了通过 MCP 服务器连接两者、使用 /design-sync 导入企业设计系统、结合截图与代码库提供上下文、利用 Refero Styles 等真实设计参考生成初版方案的方法。文章还涵盖如何通过聊天、行内评论或画布直接编辑进行迭代，安装或自建设计 Skill 以固化设计规则，以及建立评估与审批流程，最终实现从设计到代码实现的无缝衔接。同时指出了 beta 阶段的局限性。
不会前端设计没关系会抄作业就行
文章指出程序员最缺的往往不是代码能力而是审美，提出将优秀 UI 组件当作乐高，直接交给 AI Agent 挑选并整合进项目的方法。作者推荐了 5 个 UI 组件资源网站：Beautiful UI、BeUI、Rare UI、Transitions 和 shadcn/ui，只需把链接发给 Claude Code、Codex 这类 Agent，让它们自动查找组件、获取代码、修改样式并整合进项目。核心观点是：你不需要成为设计师，只需要知道去哪里找好设计。
How To Build $10K Agency-Quality Websites With Claude Code (The Complete Playbook)
本文详细介绍了如何使用Claude Code在短时间内构建高质量网站，达到代理机构收费8000-12000美元的效果。作者提出了一个五部分流程：加载设计技能、参考优秀网站、编写构建提示、进行润色和部署。通过安装设计技能、使用参考截图、提供结构化提示、分步润色和免费部署，即使非专业开发者也能在一天内完成专业级网站。文章强调约束和品味的重要性，并提供了具体操作步骤和示例。
（小白视觉篇）让AI做成高级页面，必须知道提示词
本文介绍了如何通过具体的提示词指导AI生成具有高级感的网页设计。内容涵盖了CSS质感（如毛玻璃、轻阴影、Bento网格）、排版规则、克制动效以及3D空间感的营造，旨在帮助零基础用户避免设计平庸。
都说 Kimi 审美好，实测 7 个 Skills 来找出它的最佳搭配
文章通过实测 7 个不同的设计 Skill 与 Kimi K3 模型的搭配效果，评估其在网页设计、动效和交互方面的表现。测试发现，design-taste-frontend 和 Impeccable 表现最佳，而 Kimi K3 自身的审美能力已相当出色。Skill 的作用更像是更换创意总监，而非简单的加分升级，优秀的 Skill 应为模型提供指引而非限制。
零经验开发者使用 Claude Code 构建应用的实战指南
作者作为非技术人员，详述了利用 Claude Code 在两天内构建并部署一个内容日历 Web 应用的全过程。文章总结了五个关键教训：使用 Plan Mode 先规划、分阶段构建功能、利用 CLAUDE.md 约束规范、使用截图优化设计反馈，以及克服对部署的恐惧。
Claude Code 高效实战指南：5个场景掌握50个命令
文章针对用户对 Claude Code 使用停留在初级阶段的问题，通过 5 个实战场景（上下文压缩、模型切换、低成本试错、任务隔离、工作流自动化）讲解了如何组合使用 Slash 命令。文章强调通过手动压缩上下文、动态切换模型、使用分支和代理等技巧，可以实现成本减半并大幅提升编程效率。
一小时掌握 Codex：从零构建到自动化部署的完整指南
本文详细介绍了如何高效使用 Codex 编程工具。作者通过一个 YouTube 评论情报系统的实战案例，展示了 Codex 在本地文件操作、计划模式、API 连接、技能复用及自动化部署等方面的核心功能，并将其与 Claude Code 进行了对比。
我逆向了Claude Design！免费开源！设计逻辑全公开
作者分享了其开源项目「huashu-design」，这是一个基于Claude的Agent设计技能。文章探讨了Agent-first与GUI-first设计理念的差异，详细介绍了huashu-design在品牌资产协议、自动生成PPT和iOS原型方面的功能，以及它与Claude Design的功能对比和使用限制。
利用AI设计理想UI界面的实操工作流
本文介绍了利用 Claude、Gemini、Stitch 等 AI 工具打造符合审美要求的 UI 界面的实操 SOP。文章以开发一款类似灵动岛的提醒工具为例，详细演示了如何编写产品文档、生成设计提示词、利用 Stitch 生成界面以及导出代码。针对 Web 端难以还原 macOS 毛玻璃质感的问题，作者提出了一种“设计参考集 + Claude Code + SwiftUI”的更优解，直接通过 AI 实现高质量的前端还原。
关掉电脑 ClaudeCode 也能帮你干活了，云端定时任务实操指南
本文介绍了 Claude Code 新增的云端定时任务功能。该功能允许用户设置 Prompt 和执行频率，由 Anthropic 服务器自动运行代码审查、依赖检查等重复性任务，无需本地电脑在线。文章详细对比了 Cloud、Desktop 和 /loop 三种调度模式的适用场景，并提供了创建云端任务的具体步骤，包括 Prompt 编写、仓库配置、环境设置及实用场景建议。