deepseek生成页面有大问题
- 内容介绍
- 文章标签
- 相关推荐
我使用的是的这个佬的提示词，生成图片的，想着今天DS-V4出来了，试下他的功能
在另一个话题中
深色纯色背景（如#061527），以活力的方式随机内嵌几个给定图案（除了锐利的图案）。 图案应当大，但是所有图案尺寸都一致。可以按如下方式随机二选一放入： - 纯色，颜色应当暗（接受和背景形成低对比度） - 描边，颜色明度可适当提高，但不应当显得亮 图案可以有其他色彩，但是都同为深色系 图案之间可以堆叠
提示词
深色纯色背景（如#061527），以活力的方式随机内嵌几个给定图案（除了锐利的图案）。
图案应当大，但是所有图案尺寸都一致。可以按如下方式随机二选一放入：
- 纯色，颜色应当暗（接受和背景形成低对比度）
- 描边，颜色明度可适当提高，但不应当显得亮
图案可以有其他色彩，但是都同为深色系
图案之间可以堆叠
生成出来的页面还是有问题，所有的图案都在左上角，不像是正常的页面，各位佬也试试，看是不是我的问题
链接
https://chat.deepseek.com/a/chat/s/371336c0-4f86-461d-ba53-17cc9ca8c4f1
image1657×919 207 KB
网友解答：--【壹】--：
用 v4pro 在 cc 中生成的
image2016×1321 138 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Patterns</title>
<style>
body {
margin: 0;
padding: 0;
background: #061527;
overflow: hidden;
font-family: system-ui, sans-serif;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let W, H, size;
function resize() {
W = canvas.width = window.innerWidth;
H = canvas.height = window.innerHeight;
size = Math.min(W, H) * 0.18;
}
resize();
window.addEventListener('resize', () => { resize(); draw(); });
// ── dark palette ──
const solids = [
'#0a1e3d', '#0d2247', '#0f1e38', '#0b1a33',
'#0c2030', '#0a1c2f', '#0d2535', '#0b1f3a',
'#0e213b', '#0c1e34', '#0f223d', '#0a1d36',
];
const strokes = [
'#1a3a5c', '#1e3f63', '#1b3555', '#1d3d5f',
'#183550', '#1c3858', '#1f4166', '#17324d',
'#1b3757', '#1e3e62', '#193c5a', '#1c3b5e',
];
const accents = [
'#163a4a', '#1a3040', '#152f3f', '#1c3545',
'#162e3e', '#183242', '#143040', '#1b3848',
'#173344', '#1a3646', '#163142', '#183445',
];
// ── pattern drawers (size s, centered at 0,0) ──
const patterns = [
// 0: concentric circles
(s, fill) => {
for (let r = s * 0.48; r > s * 0.06; r -= s * 0.08) {
ctx.beginPath(); ctx.arc(0, 0, r, 0, Math.PI * 2);
if (fill) { ctx.fill(); } else { ctx.stroke(); }
}
},
// 1: hexagon
(s, fill) => {
const r = s * 0.45;
ctx.beginPath();
for (let i = 0; i < 6; i++) {
const a = Math.PI / 3 * i - Math.PI / 6;
const fn = i === 0 ? 'moveTo' : 'lineTo';
ctx[fn](Math.cos(a) * r, Math.sin(a) * r);
}
ctx.closePath();
if (fill) { ctx.fill(); } else { ctx.stroke(); }
},
// 2: diamond
(s, fill) => {
const r = s * 0.48;
ctx.beginPath();
ctx.moveTo(0, -r); ctx.lineTo(r, 0); ctx.lineTo(0, r); ctx.lineTo(-r, 0);
ctx.closePath();
if (fill) { ctx.fill(); } else { ctx.stroke(); }
},
// 3: rotated square
(s, fill) => {
ctx.save(); ctx.rotate(Math.PI / 4);
const h = s * 0.38;
ctx.beginPath(); ctx.rect(-h, -h, h * 2, h * 2);
ctx.closePath();
if (fill) { ctx.fill(); } else { ctx.stroke(); }
ctx.restore();
},
// 4: cross / plus
(s, fill) => {
const w = s * 0.12;
const h = s * 0.42;
ctx.beginPath();
ctx.rect(-w, -h, w * 2, h * 2);
ctx.rect(-h, -w, h * 2, w * 2);
if (fill) { ctx.fill(); } else { ctx.stroke(); }
},
// 5: nested triangles
(s, fill) => {
for (let scale = 1; scale > 0.15; scale -= 0.18) {
const r = s * 0.44 * scale;
ctx.beginPath();
for (let i = 0; i < 3; i++) {
const a = Math.PI * 2 / 3 * i - Math.PI / 2;
const fn = i === 0 ? 'moveTo' : 'lineTo';
ctx[fn](Math.cos(a) * r, Math.sin(a) * r);
}
ctx.closePath();
if (fill) { ctx.fill(); } else { ctx.stroke(); }
}
},
// 6: wavy rings
(s, fill) => {
for (let r = s * 0.46; r > s * 0.08; r -= s * 0.07) {
ctx.beginPath();
const pts = 36 + Math.floor(r * 2);
for (let i = 0; i <= pts; i++) {
const a = Math.PI * 2 / pts * i;
const rr = r + Math.sin(i * 5 + r) * s * 0.025;
const fn = i === 0 ? 'moveTo' : 'lineTo';
ctx[fn](Math.cos(a) * rr, Math.sin(a) * rr);
}
ctx.closePath();
if (fill) { ctx.fill(); } else { ctx.stroke(); }
}
},
// 7: radial lines burst
(s, fill) => {
const count = 12 + Math.floor(s * 0.08);
for (let i = 0; i < count; i++) {
const a = Math.PI * 2 / count * i;
const r1 = s * 0.08;
const r2 = s * 0.45;
ctx.beginPath();
ctx.moveTo(Math.cos(a) * r1, Math.sin(a) * r1);
ctx.lineTo(Math.cos(a) * r2, Math.sin(a) * r2);
ctx.stroke();
}
},
// 8: ring of dots
(s, fill) => {
const rings = [0.15, 0.25, 0.35, 0.44];
for (const rr of rings) {
const r = s * rr;
const count = Math.floor(rr * 50);
for (let i = 0; i < count; i++) {
const a = Math.PI * 2 / count * i;
const dotR = s * 0.018;
ctx.beginPath();
ctx.arc(Math.cos(a) * r, Math.sin(a) * r, dotR, 0, Math.PI * 2);
if (fill) { ctx.fill(); } else { ctx.stroke(); }
}
}
},
// 9: arcing petals
(s, fill) => {
const count = 8;
for (let i = 0; i < count; i++) {
const a = Math.PI * 2 / count * i;
ctx.save();
ctx.rotate(a);
ctx.beginPath();
ctx.ellipse(0, -s * 0.28, s * 0.08, s * 0.22, 0, 0, Math.PI * 2);
if (fill) { ctx.fill(); } else { ctx.stroke(); }
ctx.restore();
}
},
];
// ── helpers ──
function rand(arr) { return arr[Math.floor(Math.random() * arr.length)]; }
function randBetween(a, b) { return a + Math.random() * (b - a); }
// ── place patterns ──
const placed = [];
function overlaps(x, y, margin) {
for (const p of placed) {
const dx = p.x - x, dy = p.y - y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < size * margin) return true;
}
return false;
}
function randomPoint() {
const pad = size * 0.3;
return {
x: randBetween(pad, W - pad),
y: randBetween(pad, H - pad),
};
}
function draw() {
ctx.fillStyle = '#061527';
ctx.fillRect(0, 0, W, H);
placed.length = 0;
const count = Math.floor((W * H) / (size * size * 1.6));
let tries = 0;
for (let i = 0; i < count && tries < count * 8; tries++) {
const pt = randomPoint();
if (overlaps(pt.x, pt.y, 0.55)) continue;
placed.push(pt);
// pick pattern & style
const pi = Math.floor(Math.random() * patterns.length);
const isFill = Math.random() < 0.5;
const palette = isFill ? solids : (Math.random() < 0.35 ? accents : strokes);
const color = rand(palette);
ctx.save();
ctx.translate(pt.x, pt.y);
if (!isFill) {
ctx.strokeStyle = color;
ctx.lineWidth = size * 0.012;
} else {
ctx.fillStyle = color;
}
// slight random rotation for variety
const rot = randBetween(0, Math.PI * 2);
ctx.rotate(rot);
patterns[pi](size, isFill);
ctx.restore();
i++;
}
}
draw();
window.addEventListener('resize', draw);
</script>
</body>
</html>
image1525×605 39.4 KB
--【贰】--：
楼主的看起来是DeepSeek写的定位全部出错了。
以及我原本的提示词下面还有一个图案表，那个是material design 3的图案，我没找到哪里有XML或者SVG版本，所以我就直接把图片提交给那些有视觉功能的模型。
但是视觉模型看到那张表之后，就会选择使用图片生成而不是SVG绘制了。这种绘制肯定会有几个图标出现问题（不是按表格绘制，或者没有按要求来，比如图案一半描边一半纯色的）
我使用的是的这个佬的提示词，生成图片的，想着今天DS-V4出来了，试下他的功能
在另一个话题中
深色纯色背景（如#061527），以活力的方式随机内嵌几个给定图案（除了锐利的图案）。 图案应当大，但是所有图案尺寸都一致。可以按如下方式随机二选一放入： - 纯色，颜色应当暗（接受和背景形成低对比度） - 描边，颜色明度可适当提高，但不应当显得亮 图案可以有其他色彩，但是都同为深色系 图案之间可以堆叠
提示词
深色纯色背景（如#061527），以活力的方式随机内嵌几个给定图案（除了锐利的图案）。
图案应当大，但是所有图案尺寸都一致。可以按如下方式随机二选一放入：
- 纯色，颜色应当暗（接受和背景形成低对比度）
- 描边，颜色明度可适当提高，但不应当显得亮
图案可以有其他色彩，但是都同为深色系
图案之间可以堆叠
生成出来的页面还是有问题，所有的图案都在左上角，不像是正常的页面，各位佬也试试，看是不是我的问题
链接
https://chat.deepseek.com/a/chat/s/371336c0-4f86-461d-ba53-17cc9ca8c4f1
image1657×919 207 KB
网友解答：--【壹】--：
用 v4pro 在 cc 中生成的
image2016×1321 138 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Patterns</title>
<style>
body {
margin: 0;
padding: 0;
background: #061527;
overflow: hidden;
font-family: system-ui, sans-serif;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let W, H, size;
function resize() {
W = canvas.width = window.innerWidth;
H = canvas.height = window.innerHeight;
size = Math.min(W, H) * 0.18;
}
resize();
window.addEventListener('resize', () => { resize(); draw(); });
// ── dark palette ──
const solids = [
'#0a1e3d', '#0d2247', '#0f1e38', '#0b1a33',
'#0c2030', '#0a1c2f', '#0d2535', '#0b1f3a',
'#0e213b', '#0c1e34', '#0f223d', '#0a1d36',
];
const strokes = [
'#1a3a5c', '#1e3f63', '#1b3555', '#1d3d5f',
'#183550', '#1c3858', '#1f4166', '#17324d',
'#1b3757', '#1e3e62', '#193c5a', '#1c3b5e',
];
const accents = [
'#163a4a', '#1a3040', '#152f3f', '#1c3545',
'#162e3e', '#183242', '#143040', '#1b3848',
'#173344', '#1a3646', '#163142', '#183445',
];
// ── pattern drawers (size s, centered at 0,0) ──
const patterns = [
// 0: concentric circles
(s, fill) => {
for (let r = s * 0.48; r > s * 0.06; r -= s * 0.08) {
ctx.beginPath(); ctx.arc(0, 0, r, 0, Math.PI * 2);
if (fill) { ctx.fill(); } else { ctx.stroke(); }
}
},
// 1: hexagon
(s, fill) => {
const r = s * 0.45;
ctx.beginPath();
for (let i = 0; i < 6; i++) {
const a = Math.PI / 3 * i - Math.PI / 6;
const fn = i === 0 ? 'moveTo' : 'lineTo';
ctx[fn](Math.cos(a) * r, Math.sin(a) * r);
}
ctx.closePath();
if (fill) { ctx.fill(); } else { ctx.stroke(); }
},
// 2: diamond
(s, fill) => {
const r = s * 0.48;
ctx.beginPath();
ctx.moveTo(0, -r); ctx.lineTo(r, 0); ctx.lineTo(0, r); ctx.lineTo(-r, 0);
ctx.closePath();
if (fill) { ctx.fill(); } else { ctx.stroke(); }
},
// 3: rotated square
(s, fill) => {
ctx.save(); ctx.rotate(Math.PI / 4);
const h = s * 0.38;
ctx.beginPath(); ctx.rect(-h, -h, h * 2, h * 2);
ctx.closePath();
if (fill) { ctx.fill(); } else { ctx.stroke(); }
ctx.restore();
},
// 4: cross / plus
(s, fill) => {
const w = s * 0.12;
const h = s * 0.42;
ctx.beginPath();
ctx.rect(-w, -h, w * 2, h * 2);
ctx.rect(-h, -w, h * 2, w * 2);
if (fill) { ctx.fill(); } else { ctx.stroke(); }
},
// 5: nested triangles
(s, fill) => {
for (let scale = 1; scale > 0.15; scale -= 0.18) {
const r = s * 0.44 * scale;
ctx.beginPath();
for (let i = 0; i < 3; i++) {
const a = Math.PI * 2 / 3 * i - Math.PI / 2;
const fn = i === 0 ? 'moveTo' : 'lineTo';
ctx[fn](Math.cos(a) * r, Math.sin(a) * r);
}
ctx.closePath();
if (fill) { ctx.fill(); } else { ctx.stroke(); }
}
},
// 6: wavy rings
(s, fill) => {
for (let r = s * 0.46; r > s * 0.08; r -= s * 0.07) {
ctx.beginPath();
const pts = 36 + Math.floor(r * 2);
for (let i = 0; i <= pts; i++) {
const a = Math.PI * 2 / pts * i;
const rr = r + Math.sin(i * 5 + r) * s * 0.025;
const fn = i === 0 ? 'moveTo' : 'lineTo';
ctx[fn](Math.cos(a) * rr, Math.sin(a) * rr);
}
ctx.closePath();
if (fill) { ctx.fill(); } else { ctx.stroke(); }
}
},
// 7: radial lines burst
(s, fill) => {
const count = 12 + Math.floor(s * 0.08);
for (let i = 0; i < count; i++) {
const a = Math.PI * 2 / count * i;
const r1 = s * 0.08;
const r2 = s * 0.45;
ctx.beginPath();
ctx.moveTo(Math.cos(a) * r1, Math.sin(a) * r1);
ctx.lineTo(Math.cos(a) * r2, Math.sin(a) * r2);
ctx.stroke();
}
},
// 8: ring of dots
(s, fill) => {
const rings = [0.15, 0.25, 0.35, 0.44];
for (const rr of rings) {
const r = s * rr;
const count = Math.floor(rr * 50);
for (let i = 0; i < count; i++) {
const a = Math.PI * 2 / count * i;
const dotR = s * 0.018;
ctx.beginPath();
ctx.arc(Math.cos(a) * r, Math.sin(a) * r, dotR, 0, Math.PI * 2);
if (fill) { ctx.fill(); } else { ctx.stroke(); }
}
}
},
// 9: arcing petals
(s, fill) => {
const count = 8;
for (let i = 0; i < count; i++) {
const a = Math.PI * 2 / count * i;
ctx.save();
ctx.rotate(a);
ctx.beginPath();
ctx.ellipse(0, -s * 0.28, s * 0.08, s * 0.22, 0, 0, Math.PI * 2);
if (fill) { ctx.fill(); } else { ctx.stroke(); }
ctx.restore();
}
},
];
// ── helpers ──
function rand(arr) { return arr[Math.floor(Math.random() * arr.length)]; }
function randBetween(a, b) { return a + Math.random() * (b - a); }
// ── place patterns ──
const placed = [];
function overlaps(x, y, margin) {
for (const p of placed) {
const dx = p.x - x, dy = p.y - y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < size * margin) return true;
}
return false;
}
function randomPoint() {
const pad = size * 0.3;
return {
x: randBetween(pad, W - pad),
y: randBetween(pad, H - pad),
};
}
function draw() {
ctx.fillStyle = '#061527';
ctx.fillRect(0, 0, W, H);
placed.length = 0;
const count = Math.floor((W * H) / (size * size * 1.6));
let tries = 0;
for (let i = 0; i < count && tries < count * 8; tries++) {
const pt = randomPoint();
if (overlaps(pt.x, pt.y, 0.55)) continue;
placed.push(pt);
// pick pattern & style
const pi = Math.floor(Math.random() * patterns.length);
const isFill = Math.random() < 0.5;
const palette = isFill ? solids : (Math.random() < 0.35 ? accents : strokes);
const color = rand(palette);
ctx.save();
ctx.translate(pt.x, pt.y);
if (!isFill) {
ctx.strokeStyle = color;
ctx.lineWidth = size * 0.012;
} else {
ctx.fillStyle = color;
}
// slight random rotation for variety
const rot = randBetween(0, Math.PI * 2);
ctx.rotate(rot);
patterns[pi](size, isFill);
ctx.restore();
i++;
}
}
draw();
window.addEventListener('resize', draw);
</script>
</body>
</html>
image1525×605 39.4 KB
--【贰】--：
楼主的看起来是DeepSeek写的定位全部出错了。
以及我原本的提示词下面还有一个图案表，那个是material design 3的图案，我没找到哪里有XML或者SVG版本，所以我就直接把图片提交给那些有视觉功能的模型。
但是视觉模型看到那张表之后，就会选择使用图片生成而不是SVG绘制了。这种绘制肯定会有几个图标出现问题（不是按表格绘制，或者没有按要求来，比如图案一半描边一半纯色的）