即刻App年轻人的同好社区
下载
App内打开
stean
84关注1被关注0夸夸
stean
7月前
stean
7月前

歸藏: 最近很多人问我，为啥我用 Claude 写的应用就没那么漂亮？ 所以教大家一些非常简单的技巧，用上了以后你也能搞定这么漂亮的界面 👇下面是具体的技巧和完整提示词 完整内容这里：https://mp.weixin.qq.com/s/tUOAfd4OI56QxD94-0PPKw 1️⃣第一个技巧： 不用非得用语言来描述你想要的界面样式，可以去一些设计平台找一些你喜欢的设计稿将图片上传到图片让模型参考。 如果你不知道去哪找的话，国内推荐站酷、海外的话推荐 Dribbble 和 Layers。 在跟 Claude 说的时候就可以忽略那些不好描述的地方，重点描述静态图片无法表现的部分，比如下面的这个卡片组件。 我就让 Claude 注意交互的动画和输入框聚焦之后的渐变动画上，界面内容和风格就让他按图片生成。 2️⃣第二个技巧： 在让 Claude 生成界面的时候，你会发现 Claude 生成的页面没有图片，本来应该是图片的部分经常是空白的，这个就很影响结果的视觉表现。 其实我们可以要求他引用一些在线的图片来填充到页面需要图片的部分。 这里首先推荐 unsplash，他是一个开源图片网站，里面有世界各地的设计大神上传的图片，而且可以直接引用。 可以看下面加上图片之后的卡片是不是就好看很多了。 3️⃣第三个技巧： 另外 claude 在生成页面的时候本来应该是图标的地方，他喜欢用 emoji 来代替，emoji 也很好，但是在一些严肃的页面上就会显得格格不入。 这里可以要求 Claude 在生成页面的时候引用在线的图标库，比如Font Awesome或Material Icons，这些开源图标库可以通过 CDN 直接引用，而且不需要部署。 可以看到引用了 Font Awesome 图标库的图标之后我们的界面变得更加简洁和整齐。 4️⃣第四个技巧： 我们常用的前端样式代码是用 CSS 写的，但是 CSS 本身的一些样式其实没有太考虑美观度的要求。 这就导致你让 Claude 写样式的时候他就会过渡自己发挥，美观度也就没办法得到保障，而且你对样式要求多之后他要从头写的 CSS 也就越多浪费很多 Token。 这里我们可以要求 Claude 用 CDN 引用 TailwindCSS 来写组件样式，Tailwind CSS 封装了一套非常美观和简洁的样式，可以让 Claude 直接调用，确保在色彩、响应式和基础组件的美观度不出大问题。 🌟提示词： 方括号［］的部分就是你需要填写的部分。 我需要创建一个[具体描述你的页面/组件类型]，请帮我生成美观且响应式的HTML+CSS代码。 ## 设计参考 我希望设计风格类似于以下参考： [上传参考图片或描述设计灵感来源] ## 技术要求 - 请使用HTML、TailwindCSS和少量必要的JavaScript - 引用Tailwind CSS（v3.0+）通过CDN - 页面需完全响应式，在移动设备和桌面端都能良好显示 ## 图片资源 - 请使用Unsplash API提供的图片作为内容图片 - 根据内容主题选择合适的关键词 ## 图标要求 - 使用Font Awesome或Material Icons等专业图标库 (通过CDN引用) - 避免使用emoji作为图标替代品 ## 交互细节 [描述任何需要的交互动画或效果，例如：] - 按钮悬停时有轻微放大效果 - 表单输入框聚焦时显示渐变边框 - 卡片在悬停时有阴影加深效果 ## 特别注意 - 确保代码干净且有适当注释 - 提供完整可运行的HTML文件，包含所有必要引用 - 优化视觉层次和间距，确保设计美观专业 5️⃣如何生成设计稿： 昨天群里一个朋友提了一嘴能不能转设计稿想了一下，居然还真可以，而且可以帮你生成带自动布局的 Figma 设计稿和对应可复用的组件。具体的方法也很简单 只需要将你生成的代码部署到线上，如果你用 Claude 或者 POE 都有这个功能，如果你用的软件没有发布能力的话可以用这个 http://yourware.so 产品。 获得了线上的链接之后，我们只需要使用 http://html.to.design 这个 Figma 插件就可以很好的将网页转换为

00
stean
7月前
stean
11月前

MooreAI: 使用 Windsurf 创建 Sprunki 游戏落地页（HTML），无任何依赖，超低成本上站 - 第一步：复制提示词，使用 Chat 模式 初始化上下文环境 - 第二步：输入关键词、Hero 结构、Hero 文案、配色文案；抽卡不同的配色和布局 - 第三步：选中不满意的布局代码，使用提示词完成调整 - 第四步：针对每一个区块进行生成，集成了上下文环境后，配色和布局会自动选择适合上下文的方案 当然，AI Coder 有一定概率抽卡，可以尝试不同颜色组合的配色方案，不要试图一键生成那样效果就会变得很差 完整内容已经投稿到了 @哥飞 的社群 提示词分享： # 游戏落地页设计智能助手 请首先提供基础信息，后续将根据您的具体要求进行设计： ## 一、基础信息采集 请提供以下游戏基本信息： 1. 游戏名称与类型 2. 核心关键词（3-5个） 3. 主要游戏特色/卖点 4. 品牌调性（硬核/休闲/二次元） 5. 目标用户群体 6. 游戏文案信息（简介/世界观/核心玩法/slogan） ## 二、整体设计方案 - 前端技术栈：HTML + Tailwind CSS + JavaScript - 一个 HTML 页面，包含多个区块，每个区块可以单独开发 - 响应式设计，移动端优先 - 判断需要图标的页面元素（如导航栏、按钮、信息提示）,确定每个图标需要传达的功能和情感，基于 Lucide 图标库生成 SVG 图标 - 根据页面的使用场景（如标题、正文、按钮）确定所需字体的特性，确保选择的字体在风格上与其他设计元素（如颜色、图像）协调统一，使用 Google Fonts 提供的字体 - 创建合适的布局和动画效果，使页面元素在视觉上具有平衡和美观的样式 # SEO 方案 - 利用关键词研究工具，发掘相关的长尾关键词和语义相关词 - 考虑用户搜索意图，包括信息型、导航型和交易型关键词 - 融入行业术语和专业词汇，提升内容权威性 - 包含问答式关键词，针对语音搜索优化 - 生成至少1000字的SEO关键词列表 - 确保关键词密度在3%左右，避免过度优化 - 对生成的关键词进行分类和优先级排序 # 配色方案 - 使用 Tailwind CSS 提供的配色方案 - 分析用户描述的情感或主题，选择与之对应的Tailwind CSS颜色 - 对主题文案使用三色渐变，并在文案内容中使用对应的颜色 - 在页面的背景、按钮或装饰元素上应用渐变类。 - 根据实际效果调整渐变方向和具体的颜色，以确保视觉效果最佳 ## 三、Hero区块设计 1. 深度策略分析 - 品牌DNA解析 - 用户痛点映射 - 价值主张提炼 - 差异化定位 2. 自动选择布局方案 A. 独占式布局 - 将主题和背景图像合并，居中显示。 - 使用背景渐变色，确保三色渐变突出主题。 B. 左右结构 - 左侧文案区 - 右侧展示区（图片/视频） - 渐变边框效果 3：文字方案 - 使用Tailwind CSS类，如 `text-lg`、`font-bold` 为标题 - 副标题可以使用 `text-gray-500` - 重要提示可以用 `rounded-full border p-2` 实现圆框效果 ```

00
stean
1年前

哥飞: 哥飞的SEO小经验两则： 一、简单总结谷歌排名到底怎么回事 刚才用下面三句话回答一位群里朋友的问题，也分享给大家： 1. title 和 h1 等页面关键词确保你的网页能够进入关键词搜索的待排名范围里； 2. 外链帮助你进入谷歌搜索前10位置； 3. 网站体验帮助你确定最终的名次。 二、Nofollow 外链也别嫌弃，对于权重提升有作用 最初 nofollow 链接的确是用来告诉搜索引擎，不要传递权重。 后来谷歌发现，交易的链接都是 dofollow 的，反倒是很多用户自发传播的链接是 nofollow ，于是修改了算法， nofollow 链接对于权重的提升也有作用了。 所以我们现在去搞外链，不要只追求 dofollow 外链， nofollow 外链也别嫌弃，有就要。

00
stean
1年前

zippo_zu: 作为后端程序员，想要出海，想要快速做出第一个Ai套壳应用？想要快速赚到第一块美元，我觉得正确的学习路径： 第一步（基础部分）：知道html常用标签、css的两个布局（flex grid）、jquery常用无法。第一阶段了解知道有个大概的认知就行。 第二步 ：直接学框架Next.js +css框架（tailwind css）。 因为是后端出身代码逻辑思维素养都在，学起来很快无非是语法的另一种表达，无法坚持下去的原因： 1、就是样式和布局很让人头痛。我的经验是当你用了tailwind css框架之后，不会写的样式直接google( tailwind css +样式），基本上都能找到，而tailwind css最好的就是找到的样式代码复制即可使用，没有过多别的语法的依赖，很是方便。 2、前端知识庞杂，会涉及到非常多的陌生领域，由于没有什么基础学起来可能就是寸步难行，一会一个专业术语出来不懂，一会一个语法出来不知道，多而杂让人望而生畏。我的经验就是先走马观花学习，有个大概的知识全景图在脑子里，后面需要什么就去查什么。 比如说学习next.js，先自己想个小需求，自己设计功能去实现，先把next.js工程的目录结构搞清楚知道文件夹设计的意义，路由导航是怎么做的，有个大概的认知之后，就开始做项目，以练代学，敲了几个项目之后就会了。 前端没有那么抽象的东西，学起来的方法很简单也实用以练代学，孰能生巧。 我是看掘金小册的next.js教程入门上手的，就这个。

00