Claude技巧分享如何生成简历前端页面

如果说ChatGPT和Claude的差别在哪，我可能一时半会说不出口。

但是，你如果问我，我为什么被Claude封号10多次，还一直使用Claude，那我可以明确的告诉你：Claude的Artifacts 功能是真的香。

Claude的Artifacts 功能的重要性主要是其可视化功能。不仅可以做前端页面还可以做流程图。

最重要的是它还会生成相应的代码！

下面就给大家分享一些Claude的使用技巧，文章分成三步。如何使用Claude生成简历;用Claude生成微信首页图片；用Claude生成定制化前端页面。

如何用Claude生成简历

先给大家看一下效果。

这是一个开源项目的提示词。下面给给大家分享！

链接：https://github.com/langgptai/AI-resume

提示词：

大家可以按照这个要求生成，如果大家想要更加准确的话，开源项目中还有编程版本，大家可以自取。

如何用Claude生成更加符合的前端首页

明确需求

首先,需要明确您想要生成的页面的具体需求,包括:

页面的目的和功能

目标用户群

主要内容和结构

设计风格和颜色方案

响应式需求

特殊的交互或动画效果

提供详细说明

向Claude提供尽可能详细的页面说明,包括:

页面的整体布局描述

各个组件的位置和功能

具体的文本内容

颜色代码、字体等样式细节

您希望使用的CSS框架(如Tailwind、Bootstrap等)

任何特殊的JavaScript功能需求

要求生成Artifact

明确告诉Claude您希望它生成一个HTML Artifact,并指定使用"text/html"类型。例如:

"请根据以上描述,生成一个完整的HTML页面作为Artifact,使用text/html类型。"

审查和迭代

检查Claude生成的HTML Artifact,并提供具体的修改意见。您可以要求Claude更新特定部分的代码,或添加新的功能。

分阶段生成

对于复杂的页面,可以分阶段进行:

先生成基本结构

再添加样式

最后加入交互功能

使用模板

如果您有特定的设计模板或框架,可以提供给Claude作为参考。

示例：

"我需要你帮我生成一个模仿抖音移动端首页的前端页面。请使用HTML、CSS (Tailwind CSS)和必要的JavaScript来创建这个页面。现在,我会提供详细的需求说明:

页面目的: 创建一个类似抖音移动端首页的单页面应用,展示短视频内容和主要功能按钮。

目标用户: 移动端用户,主要是年轻人群。

主要内容和结构:

顶部:搜索栏

中间:大型视频播放区域(占据大部分屏幕)

右侧:互动按钮(点赞、评论、分享)

底部:导航栏(首页、朋友、发布、消息、我)

设计风格和颜色方案:

主色调:黑色背景 (#000000)

辅助色:白色文字 (#FFFFFF)

强调色:粉红色 (#FE2C55) 用于重要按钮和图标

字体:无衬线字体,如San Francisco或Roboto

响应式需求: 页面应适应不同尺寸的移动设备,主要优化竖屏浏览体验。

特殊交互效果:

视频区域可以上下滑动切换

点赞按钮点击时有放大动画效果

底部导航栏当前页面图标高亮显示

不过Claude不会完全按照我们的要求生成相应的页面，我们还需要对代码进行调整。

对了，如果想要上车ChatGPT或Claude的朋友，可以看我往期的文章！