Hey,
If I want Cursor to design all of the pages in a certain style of a page that I have a screenshot of.
Where do I put it so every UI decision Cursor takes uses the image as input?
Try to use chatgpt plus or claude. or Same.dev or scrapping why hand html css and js (inspect with f12, ask to claude how to do it better ). for images it is not the best thing using cursor .
If you have more figma design mind, i am recommend seriously to learn basics of css to improove your vibe sense coding
in terms of technicall thing, just command + 4 open screenshoot command + c and paste in the cursor chat . in linux screenshot and control v. in windows i dont know what it is the same just drag and drop the image .
Gpt describe all the image. then create .css and html then copy paste to codepen.io to look fast the code . openai multimodal was the best model. but if you have psd figma sketch or something try to document that before cursor. but learn in the loop
one shooot Cursor Forum * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif; }
body {
background-color: #1a1a1a;
color: #e0e0e0;
line-height: 1.5;
}
a {
text-decoration: none;
color: #4a9eff;
}
button, .btn {
cursor: pointer;
padding: 8px 16px;
background-color: #2b7de9;
color: white;
border: none;
border-radius: 4px;
font-size: 14px;
transition: background-color 0.2s;
}
button:hover, .btn:hover {
background-color: #1e6ed0;
}
/* Header */
header {
background-color: #222;
border-bottom: 1px solid #333;
padding: 10px 20px;
display: flex;
align-items: center;
}
.logo {
font-size: 20px;
font-weight: bold;
color: #fff;
display: flex;
align-items: center;
margin-right: 20px;
}
.logo i {
margin-right: 10px;
}
.search-bar {
flex-grow: 1;
position: relative;
max-width: 700px;
}
.search-bar input {
width: 100%;
padding: 8px 15px;
background-color: #333;
color: #e0e0e0;
border: none;
border-radius: 4px;
font-size: 14px;
}
/* Main Layout */
.main-container {
display: flex;
height: calc(100vh - 54px);
}
/* Sidebar */
.sidebar {
width: 250px;
background-color: #222;
padding: 20px 0;
overflow-y: auto;
border-right: 1px solid #333;
}
.sidebar-section {
margin-bottom: 20px;
padding: 0 15px;
}
.sidebar-item {
display: flex;
align-items: center;
padding: 8px 15px;
color: #bbb;
border-radius: 4px;
margin-bottom: 2px;
cursor: pointer;
}
.sidebar-item:hover {
background-color: #333;
}
.sidebar-item.active {
background-color: #383838;
color: #fff;
}
.sidebar-item i {
width: 20px;
margin-right: 10px;
font-size: 16px;
}
.sidebar-heading {
font-size: 12px;
text-transform: uppercase;
color: #777;
padding: 5px 15px;
margin: 10px 0 5px;
letter-spacing: 0.5px;
}
.category {
display: flex;
align-items: center;
padding: 8px 15px;
color: #bbb;
border-radius: 4px;
margin-bottom: 2px;
cursor: pointer;
}
.category:hover {
background-color: #333;
}
.category i {
width: 20px;
margin-right: 10px;
font-size: 16px;
}
.category .dot {
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 10px;
}
.category .dot.bug {
background-color: #ff5722;
}
.category .dot.discussion {
background-color: #2196f3;
}
.category .dot.feature {
background-color: #8bc34a;
}
.category .dot.feedback {
background-color: #ff9800;
}
.category .dot.howto {
background-color: #ff9800;
}
/* Content Area */
.content {
flex-grow: 1;
overflow-y: auto;
padding: 20px;
}
.topic-header {
margin-bottom: 20px;
}
.topic-title {
font-size: 24px;
font-weight: 600;
margin-bottom: 5px;
color: #fff;
}
.topic-category {
display: inline-block;
background-color: #ff9800;
color: #1a1a1a;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
/* Posts */
.post {
background-color: #262626;
border-radius: 8px;
margin-bottom: 20px;
overflow: hidden;
}
.post-header {
display: flex;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #333;
}
.post-user {
display: flex;
align-items: center;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
background-color: #4a6ee0;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-info {
display: flex;
flex-direction: column;
}
.username {
font-weight: 600;
color: #fff;
}
.post-time {
color: #888;
font-size: 14px;
}
.post-content {
padding: 15px;
}
.post-actions {
display: flex;
padding: 10px 15px;
border-top: 1px solid #333;
justify-content: flex-end;
}
.post-action {
margin-left: 15px;
color: #888;
display: flex;
align-items: center;
cursor: pointer;
}
.post-action i {
margin-right: 5px;
}
.reply-btn {
background-color: #2b7de9;
color: white;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
}
.post-views {
display: flex;
align-items: center;
margin: 10px 0;
color: #888;
font-size: 14px;
}
.post-views-number {
margin-right: 10px;
}
.user-avatars {
display: flex;
}
.user-avatars .user-avatar {
width: 24px;
height: 24px;
margin-right: 5px;
}
/* Suggested/Related Tabs */
.tabs {
display: flex;
border-bottom: 1px solid #333;
margin: 20px 0;
}
.tab {
padding: 10px 20px;
cursor: pointer;
color: #888;
position: relative;
}
.tab.active {
color: #fff;
}
.tab.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
background-color: #2b7de9;
}
/* Related Topics */
.related-topics {
background-color: #262626;
border-radius: 8px;
overflow: hidden;
}
.related-topic {
padding: 15px;
border-bottom: 1px solid #333;
}
.related-topic:last-child {
border-bottom: none;
}
.related-topic-title {
font-weight: 500;
margin-bottom: 5px;
color: #fff;
display: flex;
align-items: center;
}
.related-topic-title .dot {
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 8px;
}
.related-topic-category {
font-size: 12px;
color: #888;
}
.related-topic-replies {
text-align: right;
padding: 5px 10px;
color: #888;
font-size: 14px;
}
/* New Topics Counter */
.new-topics-counter {
text-align: center;
margin: 20px 0;
color: #e0e0e0;
font-size: 14px;
}
.new-topics-counter span {
color: #2b7de9;
font-weight: bold;
}
/* Footer */
.footer {
display: flex;
padding: 10px;
border-top: 1px solid #333;
background-color: #222;
}
.footer-action {
color: #888;
margin-right: 15px;
cursor: pointer;
font-size: 16px;
}
</style>
Cursor
Document
<!-- Main Container -->
<div class="main-container">
<!-- Sidebar -->
<div class="sidebar">
<div class="sidebar-section">
<div class="sidebar-item">
<i class="fas fa-layer-group"></i>
<span>Topics</span>
</div>
<div class="sidebar-item">
<i class="fas fa-file-alt"></i>
<span>My Posts</span>
</div>
<div class="sidebar-item">
<i class="fas fa-users"></i>
<span>Users</span>
</div>
<div class="sidebar-item">
<i class="fas fa-certificate"></i>
<span>Badges</span>
</div>
<div class="sidebar-item">
<i class="fas fa-users-cog"></i>
<span>Groups</span>
</div>
<div class="sidebar-item">
<i class="fas fa-ellipsis-h"></i>
<span>More</span>
</div>
</div>
<div class="sidebar-section">
<div class="sidebar-heading">Categories</div>
<div class="category">
<div class="dot bug"></div>
<span>Bug Reports</span>
</div>
<div class="category">
<div class="dot discussion"></div>
<span>Discussion</span>
</div>
<div class="category">
<div class="dot feature"></div>
<span>Feature Requests</span>
</div>
<div class="category">
<div class="dot feedback"></div>
<span>Feedback</span>
</div>
<div class="category active">
<div class="dot howto"></div>
<span>How To</span>
</div>
<div class="category">
<i class="fas fa-list"></i>
<span>All categories</span>
</div>
</div>
</div>
<!-- Content Area -->
<div class="content">
<div class="topic-header">
<h1 class="topic-title">Cursor frontend design</h1>
<div class="topic-category">How To</div>
</div>
<!-- Post 1 -->
<div class="post">
<div class="post-header">
<div class="post-user">
<div class="user-avatar">
<img src="/api/placeholder/40/40" alt="User Avatar">
</div>
<div class="user-info">
<div class="username">TimKerger</div>
</div>
</div>
<div class="post-time">19h</div>
</div>
<div class="post-content">
<p>Hey,</p>
<br>
<p>If I want Cursor to design all of the pages in a certain style of a page that I have a screenshot of.</p>
<br>
<p>Where do I put it so every UI decision Cursor takes uses the image as input?</p>
</div>
<div class="post-actions">
<div class="post-action">
<i class="far fa-heart"></i>
</div>
<div class="post-action">
<i class="fas fa-link"></i>
</div>
<div class="post-action">
<i class="fas fa-ellipsis-h"></i>
</div>
<div class="post-action reply-btn">
<i class="fas fa-reply"></i>
Reply
</div>
</div>
</div>
<div class="post-views">
<div class="post-views-number">36 views</div>
<div class="user-avatars">
<div class="user-avatar">
<img src="/api/placeholder/24/24" alt="User Avatar">
</div>
<div class="user-avatar">
<img src="/api/placeholder/24/24" alt="User Avatar">
</div>
</div>
</div>
<!-- Post 2 -->
<div class="post">
<div class="post-header">
<div class="post-user">
<div class="user-avatar">
<img src="/api/placeholder/40/40" alt="User Avatar">
</div>
<div class="user-info">
<div class="username">silkux</div>
</div>
</div>
<div class="post-time">16m</div>
</div>
<div class="post-content">
<p>Try to use chatgpt plus or claude. or Same.dev or scrapping why hand html css and js (inspect with f12, ask to claude how to do it better ). for images it is not the best thing using cursor.</p>
<br>
<p>If you have more figma design mind, i am recommend seriously to learn basics of css to improove your vibe sense coding</p>
</div>
<div class="post-actions">
<div class="post-action">
<i class="fas fa-link"></i>
</div>
<div class="post-action">
<i class="fas fa-edit"></i>
</div>
<div class="post-action">
<i class="fas fa-ellipsis-h"></i>
</div>
<div class="post-action reply-btn">
<i class="fas fa-reply"></i>
Reply
</div>
</div>
</div>
<!-- Post 3 -->
<div class="post">
<div class="post-header">
<div class="post-user">
<div class="user-avatar">
<img src="/api/placeholder/40/40" alt="User Avatar">
</div>
<div class="user-info">
<div class="username">silkux</div>
</div>
</div>
<div class="post-time">15m</div>
</div>
<div class="post-content">
<p>in terms of technicall thing, just command + 4 open screenshoot command + c and paste in the cursor chat . in linux screenshot and control v. in windows i dont know what it is the same just drag and drop the image .</p>
</div>
<div class="post-actions">
<div class="post-action">
<i class="fas fa-link"></i>
</div>
<div class="post-action">
<i class="fas fa-edit"></i>
</div>
<div class="post-action">
<i class="fas fa-ellipsis-h"></i>
</div>
<div class="post-action reply-btn">
<i class="fas fa-reply"></i>
Reply
</div>
</div>
</div>
<!-- Tabs and Related Topics -->
<div class="tabs">
<div class="tab active">Suggested</div>
<div class="tab">Related</div>
</div>
<div class="related-topics">
<div class="related-topic">
<div class="related-topic-title">
<div class="dot howto"></div>
How to see MCP add server UI
</div>
<div class="related-topic-category">How To</div>
<div class="related-topic-replies">1</div>
</div>
<div class="related-topic">
<div class="related-topic-title">
<div class="dot howto"></div>
Enhanced General Rule:
</div>
<div class="related-topic-category">How To</div>
<div class="related-topic-replies">3</div>
</div>
<div class="related-topic">
<div class="related-topic-title">
<div class="dot howto"></div>
MCP Cmd Opening
</div>
<div class="related-topic-category">How To</div>
<div class="related-topic-replies">0</div>
</div>
<div class="related-topic">
<div class="related-topic-title">
<div class="dot howto"></div>
Create a dashboard in WordPress project
</div>
<div class="related-topic-category">How To</div>
<div class="related-topic-replies">3</div>
</div>
<div class="related-topic">
<div class="related-topic-title">
<div class="dot howto"></div>
Cursor supports private local deployment?
</div>
<div class="related-topic-category">How To</div>
<div class="related-topic-replies">0</div>
</div>
</div>
<div class="new-topics-counter">
There are <span>91 new</span> topics remaining, or browse other topics in <span>How To</span>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="footer-action">
<i class="far fa-lightbulb"></i>
</div>
<div class="footer-action">
<i class="fas fa-plus"></i>
</div>
<div class="footer-action">
<i class="far fa-file-alt"></i>
</div>
</div>
<script>
// Simple toggle for user dropdown
document.addEventListener('DOMContentLoaded', function() {
// Tab switching
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
tabs.forEach(t => t.classList.remove('active'));
this.classList.add('active');
});
});
// Reply button functionality
const replyButtons = document.querySelectorAll('.reply-btn');
replyButtons.forEach(button => {
button.addEventListener('click', function() {
alert('Reply feature would open here');
});
});
// Category selection
const categories = document.querySelectorAll('.category');
categories.forEach(category => {
category.addEventListener('click', function() {
categories.forEach(c => c.classList.remove('active'));
this.classList.add('active');
});
});
});
</script>